# Toast Notification

## Types

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

const types = ['information', 'success', 'warning', 'error'];

<SilkeBox gap>
  <SilkeBox column gap>
    {types.map((type, i) => (
      <SilkeToastNotification
        key={i}
        inline
        kind={type}
        subtitle="Notification text goes here."
        onRemove={() => {}}
      />
    ))}
  </SilkeBox>
</SilkeBox>;
```

## Testing

```js
const [notifications, setNotifications] = React.useState([]);
const [type, setType] = React.useState('information');

const addNotification = () => {
  setNotifications(notifications.concat([{ id: notifications.length + 1, kind: type }]));
};

<>
  <SilkeBox column gap>
    <SilkeToastNotification
      inline
      subtitle="Subtitle text here. Subtitle text here. Subtitle text here. Subtitle text here. Subtitle text here. Subtitle text here. Subtitle text here"
      onRemove={() => {}}
    />

    <SilkeBox gap="m">
      <SilkeButton
        label="Generate notification"
        onClick={() => {
          addNotification();
        }}
      />
      <SilkeSelectField
        onChange={setType}
        value={type}
        items={[
          { value: 'information' },
          { value: 'success' },
          { value: 'attention' },
          { value: 'error' },
          { value: 'warning' },
          { value: 'confetti' },
        ]}
      />
    </SilkeBox>
    {notifications.map((item) => (
      <SilkeToastNotification
        key={item.id}
        kind={item.kind || 'information'}
        title="Warning title"
        subtitle="Notification text for notification box with more than one line."
        onRemove={() => {
          setNotifications(
            notifications.filter((n) => {
              return n.id !== item.id;
            }),
          );
        }}
      />
    ))}
  </SilkeBox>
</>;
```

```jsx
() => (
  <SilkeBox column gap>
    <SilkeToastNotification
      inline
      kind="success"
      subtitle="Subtitle text here"
      onAction={() => {}}
      actionLabel="Click here"
    />
    <SilkeToastNotification kind="error" inline subtitle="Subtitle text here" onRemove={() => {}} />
    <SilkeToastNotification
      kind="success"
      inline
      subtitle="Subtitle text here"
      onRemove={() => {}}
    />
    <SilkeToastNotification
      kind="information"
      inline
      subtitle="Subtitle text here"
      onRemove={() => {}}
    />
  </SilkeBox>
);
```

## Box notification

```js
<>
  <SilkeBox column gap>
    <SilkeToastNotification kind="success" subtitle="Subtitle text here" />
    <SilkeToastNotification kind="error" subtitle="Subtitle text here" onRemove={() => {}} />
    <SilkeToastNotification kind="success" subtitle="Subtitle text here" onRemove={() => {}} />
    <SilkeToastNotification kind="information" subtitle="Subtitle text here" onRemove={() => {}} />
    <SilkeToastNotification
      kind="error"
      subtitle="Subtitle text here"
      actionLabel="Fix now"
      onAction={() => {}}
      onRemove={() => {}}
    />
  </SilkeBox>
</>
```

## Box notification with action and subtitle

```js
<>
  <SilkeBox column gap>
    <SilkeToastNotification
      kind="success"
      title="With action"
      subtitle="Notification text for notification box with more than one line."
      actionLabel="Take action"
      onAction={() => {}}
    />
    <SilkeToastNotification
      kind="error"
      title="With action"
      subtitle="Notification text for notification box with more than one line."
      actionLabel="Take action"
      onAction={() => {}}
    />
    <SilkeToastNotification
      kind="success"
      title="With action"
      subtitle="Notification text for notification box with more than one line."
      actionLabel="Take action"
      onAction={() => {}}
    />
    <SilkeToastNotification
      kind="information"
      title="With action"
      subtitle="Notification text for notification box with more than one line."
      actionLabel="Take action"
      onAction={() => {}}
    />
  </SilkeBox>
</>
```

## Box notification fluid

```js
<>
  <SilkeBox column gap>
    <SilkeToastNotification
      fluid
      kind="success"
      title="Title text here"
      subtitle="Subtitle text here"
    />
    <SilkeToastNotification
      fluid
      kind="error"
      title="Title text here"
      subtitle="Subtitle text here"
      onRemove={() => {}}
    />
    <SilkeToastNotification
      fluid
      kind="success"
      title="Title text here"
      subtitle="Subtitle text here"
      onRemove={() => {}}
    />
    <SilkeToastNotification
      fluid
      kind="information"
      title="Title text here"
      subtitle="Subtitle text here"
      onRemove={() => {}}
    />
  </SilkeBox>
</>
```