Alert

Variants #

The default is error.

<Alert>
  <Alert.Title>Error variant</Alert.Title>
  <span>
    Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan
    ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.
  </span>
</Alert>
<Alert variant="warning">
  <Alert.Title>Warning variant</Alert.Title>
  <span>
    Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan
    ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.
  </span>
</Alert>
<Alert variant="success">
  <Alert.Title>Success variant</Alert.Title>
  <span>
    Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan
    ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.
  </span>
</Alert>
<Alert variant="info">
  <Alert.Title>Info variant</Alert.Title>
  <span>
    Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan
    ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.
  </span>
</Alert>
Copy

With only Alert.Title #

We're adding an icon matching the variant (see above examples) but you can remove it or add a custom node instead

<Alert>
  <Alert.Title>Welcome to the jungle</Alert.Title>
</Alert>
<Alert>
  <Alert.Title icon={<HeartIcon />}>Welcome to the jungle</Alert.Title>
</Alert>
<Alert>
  <Alert.Title icon="😵">Welcome to the jungle</Alert.Title>
</Alert>
<Alert>
  <Alert.Title icon={null}>Welcome to the jungle</Alert.Title>
</Alert>
Copy

With Button #

When usin Alert.Button, we will show it in a column on the right

<Alert>
  <Alert.Title>Welcome to the jungle</Alert.Title>
  <span>
    Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan ultrices.
    Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.
  </span>
  <Alert.Button variant="secondary">Button</Alert.Button>
</Alert>
Copy

<Alert>
  <Alert.Title>Welcome to the jungle</Alert.Title>
  <Alert.Button variant="secondary">Button</Alert.Button>
</Alert>
Copy

Properties #

Alert #

Alert.Title #

Packages #

Dependencies #

Peer dependencies #