Alert

Display a brief, important message in a way that attracts the user's attention without interrupting the user's task.

Import

tsx
import { Alert } from "@kobalte/pigment";

tsx
import { Alert } from "@kobalte/pigment";

Basic usage

tsx
<Alert>A new software update is available.</Alert>

tsx
<Alert>A new software update is available.</Alert>

Customization

Variants

The Alert component comes in two variants: solid and soft (default).

tsx
<Alert variant="solid" status="info">
  A new software update is available.
</Alert>
<Alert variant="soft" status="info">
  A new software update is available.
</Alert>

tsx
<Alert variant="solid" status="info">
  A new software update is available.
</Alert>
<Alert variant="soft" status="info">
  A new software update is available.
</Alert>

Status

The Alert component supports six different status which affect the color scheme and default status icon used: success, info (default), warning, danger and discovery.

tsx
<Alert variant="soft" status="success">
  The data has been successfully saved on our server.
</Alert>
<Alert variant="soft" status="info">
  A new software update is available.
</Alert>
<Alert variant="soft" status="warning">
  Your registration token is about to expire.
</Alert>
<Alert variant="soft" status="danger">
  There was an error processing your request.
</Alert>
<Alert variant="soft" status="discovery">
  Learn about the latest features.
</Alert>

tsx
<Alert variant="soft" status="success">
  The data has been successfully saved on our server.
</Alert>
<Alert variant="soft" status="info">
  A new software update is available.
</Alert>
<Alert variant="soft" status="warning">
  Your registration token is about to expire.
</Alert>
<Alert variant="soft" status="danger">
  There was an error processing your request.
</Alert>
<Alert variant="soft" status="discovery">
  Learn about the latest features.
</Alert>

Sections

Use the leadingSection and trailingSection props to append content to either side of the alert.

tsx
<Alert
  variant="soft"
  color="info"
  icon={<RocketIcon />}
  trailingSection={<CloseButton variant="soft" color="info" size="sm" />}
>
  A new software update is available.
</Alert>

tsx
<Alert
  variant="soft"
  color="info"
  icon={<RocketIcon />}
  trailingSection={<CloseButton variant="soft" color="info" size="sm" />}
>
  A new software update is available.
</Alert>

API Reference

Component identifier

The name Alert can be used when providing default props and slot classes in the theme.

Props

Slots