Density

Alert

Neutral, one-row feedback with optional slots and controlled dismissal.

Changes saved
import { Alert } from "density-base-ui";

export default function AlertDefaultExample() {
  return <Alert>Changes saved</Alert>;
}

Color

Set color to destructive, warning, or success for semantic status feedback. Combine it with any emphasis value to choose the status treatment; the grid shows every combination.

primarysecondaryoutlineghost-primaryghost-secondaryghost-tertiary
destructive
Status
Status
Status
Status
Status
Status
warning
Status
Status
Status
Status
Status
Status
success
Status
Status
Status
Status
Status
Status
import { Alert, View } from "density-base-ui";

const colors = ["destructive", "warning", "success"] as const;
const emphases = [
  "primary",
  "secondary",
  "outline",
  "ghost-primary",
  "ghost-secondary",
  "ghost-tertiary",
] as const;

export default function AlertColorExample() {
  return (
    <View align="stretch" gap="md">
      <View
        align="center"
        gap="md"
        layout="grid"
        style={{ gridTemplateColumns: "7rem repeat(6, minmax(0, 1fr))" }}
      >
        <span />
        {emphases.map((emphasis) => (
          <span key={emphasis} data-dn-size="xs">
            {emphasis}
          </span>
        ))}
      </View>
      {colors.map((color) => (
        <View
          key={color}
          align="center"
          gap="md"
          layout="grid"
          style={{ gridTemplateColumns: "7rem repeat(6, minmax(0, 1fr))" }}
        >
          <span data-dn-size="xs">{color}</span>
          {emphases.map((emphasis) => (
            <Alert color={color} emphasis={emphasis} key={emphasis}>
              Status
            </Alert>
          ))}
        </View>
      ))}
    </View>
  );
}

Leading and trailing content

Your profile needs attention
import { Alert, Button } from "density-base-ui";
import { Info } from "lucide-react";

export default function AlertSlotsExample() {
  return (
    <Alert
      childrenEnd={<Button>Details</Button>}
      childrenStart={<Info aria-hidden="true" size={16} />}
    >
      Your profile needs attention
    </Alert>
  );
}

Dismiss control

Set dismissable to place a Close control at the far end of the alert. Handle onOpenChange to remove the alert from its owner.

Dismiss this alert
import { Alert } from "density-base-ui";

export default function AlertDismissableExample() {
  return <Alert dismissable>Dismiss this alert</Alert>;
}