Alert

<Alert
  color="grey"
  content="Информационное сообщение. Ширина сообщения задаётся шириной формы. Может быть инвертированным, акцентным и красным."
/>
<div style={{ height: 8 }} />
<Alert
  color="black"
  content="Информационное сообщение. Ширина сообщения задаётся шириной формы. Может быть инвертированным, акцентным и красным."
/>
<div style={{ height: 8 }} />
<Alert
  color="blue"
  content="Информационное сообщение. Ширина сообщения задаётся шириной формы. Может быть инвертированным, акцентным и красным."
/>
<div style={{ height: 8 }} />
<Alert
  color="red"
  content="Информационное сообщение. Ширина сообщения задаётся шириной формы. Может быть инвертированным, акцентным и красным."
/>
<div style={{ height: 8 }} />
<Alert
  color="yellow"
  content="Информационное сообщение. Ширина сообщения задаётся шириной формы. Может быть инвертированным, акцентным и красным."
/>

<Alert
  color="grey"
  content={
    <div>
      you can pass react component to a content prop
      <button type="button" onClick={() => console.log('clicked')}>
        click me
      </button>
    </div>
  }
/>

<Alert type="notification" color="grey" content="Информационное сообщение." />
<div style={{ height: 8 }} />
<Alert
  type="notification"
  color="blue"
  content={<div>Информационное сообщение.</div>}
  onDismiss={() => console.log('dismiss clicked')}
/>
<div style={{ height: 8 }} />
<Alert
  type="notification"
  color="red"
  content="Уведомления — это оповещения пользователя о событиях системы, которое требует его внимания или действия"
  onDismiss={() => console.log('dismiss clicked')}
/>