Alert

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

Usage

This component is used to communicate a message to the user. Use it to display a brief, important message that attracts the user's attention without interrupting their task.

import { Alert, Icon } from "@elemnts-ui/react"

<Alert>
  <Alert.Indicator>
    <Icon icon="tabler:info-circle" />
  </Alert.Indicator>
  <Alert.Content>
    <Alert.Title>Information</Alert.Title>
    <Alert.Description>This is an important message.</Alert.Description>
  </Alert.Content>
</Alert>

With Description

Supporting descriptive text can be added under the title to provide additional context.

Status

The component supports different statuses to convey different meanings.

Variants

Style the alert with different variants to convey different meanings.

With Controls

Add action buttons can be added to the alert.

API Reference

AlertRoot

The root container for the alert.

Prop	Type	Default
variant	`primary` \| `secondary` \| `tertiary` \| `surface`	`'secondary'`
status	`default` \| `success` \| `warning` \| `destructive` \| `info`	`'info'`
asChild	`boolean`	`false`

AlertIndicator

The indicator container for the alert.

Prop	Type	Default
asChild	`boolean`	`false`

AlertControl

Container for action buttons in the alert.

Prop	Type	Default
asChild	`boolean`	`false`

AlertTitle

The title of the alert.

Prop	Type	Default
asChild	`boolean`	`false`

AlertDescription

The description of the alert.

Prop	Type	Default
asChild	`boolean`	`false`