Alert

A callout for displaying important information with semantic variants.

$ npx @beaket/ui add alert

Note

This is a note providing additional information.

Source

import { Alert } from "@/components/ui/alert";

const args = {
  children: "This is a note providing additional information.",
};

export default function Example() {
  return <Alert {...args} />;
}

Examples

All States

All Variants

Note

Note: General information.

Tip

Tip: Helpful suggestion.

Important

Important: Key information.

Warning

Warning: Be careful.

Caution

Caution: Dangerous action.

With Custom Titles

Did you know?

Custom titles can make alerts more contextual.

Before you proceed

Make sure you have saved your work.

With Rich Content

Important

You can include multiple paragraphs in an alert.

This allows for more detailed explanations when needed.

Source

import { Alert } from "@/components/ui/alert";

export default () => (
  <div className="max-w-lg space-y-6">
    <div>
      <h3 className="mb-4 text-sm font-medium">All Variants</h3>
      <div className="space-y-3">
        <Alert variant="note">Note: General information.</Alert>
        <Alert variant="tip">Tip: Helpful suggestion.</Alert>
        <Alert variant="important">Important: Key information.</Alert>
        <Alert variant="warning">Warning: Be careful.</Alert>
        <Alert variant="caution">Caution: Dangerous action.</Alert>
      </div>
    </div>

    <div>
      <h3 className="mb-4 text-sm font-medium">With Custom Titles</h3>
      <div className="space-y-3">
        <Alert variant="note" title="Did you know?">
          Custom titles can make alerts more contextual.
        </Alert>
        <Alert variant="warning" title="Before you proceed">
          Make sure you have saved your work.
        </Alert>
      </div>
    </div>

    <div>
      <h3 className="mb-4 text-sm font-medium">With Rich Content</h3>
      <Alert variant="important">
        <p>You can include multiple paragraphs in an alert.</p>
        <p className="mt-2">This allows for more detailed explanations when needed.</p>
      </Alert>
    </div>
  </div>
);

All Variants

Note

This is a note. Use it for general information.

Tip

This is a tip. Use it for helpful suggestions.

Important

This is important. Use it for key information.

Warning

This is a warning. Use it for cautionary messages.

Caution

This is caution. Use it for dangerous actions.

Source

import { Alert } from "@/components/ui/alert";

const args = {};

const render = () => (
  <div className="max-w-lg space-y-4">
    <Alert variant="note">
      <p>This is a note. Use it for general information.</p>
    </Alert>

    <Alert variant="tip">
      <p>This is a tip. Use it for helpful suggestions.</p>
    </Alert>

    <Alert variant="important">
      <p>This is important. Use it for key information.</p>
    </Alert>

    <Alert variant="warning">
      <p>This is a warning. Use it for cautionary messages.</p>
    </Alert>

    <Alert variant="caution">
      <p>This is caution. Use it for dangerous actions.</p>
    </Alert>
  </div>
);

export default function Example() {
  return render();
}

Props

Name	Type	Default	Description
variant	undefined \| note \| tip \| important \| warning \| caution \| info \| success \| accent \| danger	—	Semantic roles: info, success, accent, warning, danger. GitHub callout names remain aliases.
title	string \| undefined	—	Title text for the alert. If not provided, displays the variant name capitalized.