1. Components
  2. Feedback
  3. Alert

Alert

Displays a callout for user attention.

Report an issueEdit this page
<Alert>You can add components to your app using the cli.</Alert>

Installation

npx dotui-cli@latest add alert

Examples

Variants

Use the variant prop to change the visual style of the alert.

<Alert variant="neutral" title="This is a neutral alert" />
<Alert variant="info" title="This is a neutral alert" />
<Alert variant="danger" title="This is a critical alert" />
<Alert variant="warning" title="This is a warning alert" />
<Alert variant="success" title="This is a success alert" />

Title

Use the title prop to add a title to the alert.

<Alert variant="warning" fill title="Your account has been suspended." />

Content

Pass children to the alert to add content.

<Alert title="Payment Information">
  Enter your payment method to complete your purchase.
</Alert>

Custom icon

Use the icon prop to add a custom icon to the alert. An explicit null value can be used to remove the default icon.

<Alert icon={<GlobeIcon />}>Hello world!</Alert>

Action

Use the action prop to add an action to the alert.

<Alert
  action={<Button>Upgrade</Button>}
>
  You are currently on the free plan. Upgrade to unlock more features.
</Alert>

Examples

Composition

If you need to customize things further, you can drop down the composition pattern.

<AlertRoot>
  <WalletIcon />
  <div className="flex-1">
    <AlertTitle>Payment Information</AlertTitle>
    <AlertContent>
      Enter your payment method to complete your purchase.
    </AlertContent>
  </div>
  <Button variant="primary" size="sm">
    Upgrade
  </Button>
</AlertRoot>

API Reference

Alert accepts all HTML div element props and the following:

PropTypeDefaultDescription
variant'default' | 'success' | 'warning' | 'danger' | 'info' 'default'The visual style of the alert.
fillbooleanfalseWeather the visual style should be filled.

Last updated on 10/11/2024

DropzoneProgress Bar
dotUI

Bringing singularity to the web.

Community

Built by mehdibha. The source code is available on GitHub.