# Action Box

## With button

```js
const title = 'Warning';
const subtitle = 'Some subitle text here';

const types = ['inline', 'stacked', 'centered'];

<SilkeBox gap>
  <SilkeBox column gap>
    {types.map((type, i) => (
      <SilkeActionBox
        key={i}
        kind={type}
        title="The content has been updated"
        icon="widget"
        buttons={[{ label: 'View', kind: 'secondary' }]}
      />
    ))}
  </SilkeBox>
</SilkeBox>;
```

## With link

```js
const title = 'Warning';
const subtitle = 'Some subitle text here';

const types = ['inline', 'stacked', 'centered'];

<SilkeBox gap>
  <SilkeBox column gap>
    {types.map((type, i) => (
      <SilkeActionBox
        key={i}
        kind={type}
        title="The content has been updated"
        icon="widget"
        link={{ label: 'View', href: '#' }}
      />
    ))}
  </SilkeBox>
</SilkeBox>;
```

## With multiple buttons

```js
const title = 'Warning';
const subtitle = 'Some subitle text here';

const types = ['inline', 'stacked', 'centered'];

<SilkeBox gap>
  <SilkeBox column gap>
    {types.map((type, i) => (
      <SilkeActionBox
        key={i}
        kind={type}
        title="The content has been updated"
        icon="widget"
        buttons={[
          { label: 'Confirm', kind: 'primary' },
          { label: 'Cancel', kind: 'secondary' },
        ]}
      />
    ))}
  </SilkeBox>
</SilkeBox>;
```

## Without icon

```js
const title = 'Warning';
const subtitle = 'Some subitle text here';

const types = ['inline', 'stacked', 'centered'];

<SilkeBox gap>
  <SilkeBox column gap>
    {types.map((type, i) => (
      <SilkeActionBox
        key={i}
        kind={type}
        title="The content has been updated"
        buttons={[{ label: 'View', kind: 'secondary' }]}
      />
    ))}
  </SilkeBox>
</SilkeBox>;
```

## With custom contents

```js
<SilkeBox column gap>
  <SilkeBox style={{ width: '250px' }}>
    <SilkeActionBox kind="inline" icon="refresh" buttons={[{ label: 'Review', kind: 'secondary' }]}>
      <div
        style={{
          display: '-webkit-box',
          '-webkit-line-clamp': '2',
          '-webkit-box-orient': 'vertical',
          overflow: 'hidden',
        }}
      >
        <SilkeText size="small">
          Update available for{' '}
          <SilkeText weight="strong" size="small">
            6 components
          </SilkeText>
        </SilkeText>
      </div>
    </SilkeActionBox>
  </SilkeBox>

  <SilkeBox style={{ width: '200px' }}>
    <SilkeActionBox
      kind="centered"
      link={{
        label: 'Learn more',
        href: 'https://help.vev.design/en/articles/6237869-main-components',
        external: true,
      }}
    >
      <SilkeBox column gap="xs">
        <SilkeText weight="strong" size="small">
          Create a Main component
        </SilkeText>
        <SilkeText size="small" color="neutral-70">
          Ensure design consistency across your project by using Main components.
        </SilkeText>
      </SilkeBox>
    </SilkeActionBox>
  </SilkeBox>

  <SilkeBox>
    <SilkeActionBox
      kind="centered"
      buttons={[{ label: 'Create with AI', kind: 'secondary', icon: 'ai' }]}
    >
      <SilkeText weight="strong" size="small">
        Build a custom layout with AI
      </SilkeText>
    </SilkeActionBox>
  </SilkeBox>
</SilkeBox>
```