Alert — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Base UI.

Installation

Complete project setup first. Your configuration must select react/base and include your Design System ID.

pnpm exec frontfriend download alert -f react --primitive base

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
<Alert variant="default" icon="Info">
  <AlertTitle>Action needed</AlertTitle>
  <AlertDescription>
    Your password will expire in 3 days. Please update it to maintain access.
  </AlertDescription>
</Alert>;

Examples

Default

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
<Alert variant="default" icon="Info">
  <AlertTitle>Action needed</AlertTitle>
  <AlertDescription>
    Your password will expire in 3 days. Please update it to maintain access.
  </AlertDescription>
</Alert>;

Destructive

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
<Alert variant="destructive" icon="Info">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    There was an error processing your request. Please try again later.
  </AlertDescription>
</Alert>;

Info

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
<Alert variant="info" icon="OctagonAlert">
  <AlertTitle>Information</AlertTitle>
  <AlertDescription>
    Your profile has been updated successfully.
  </AlertDescription>
</Alert>;

Success

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
<Alert variant="success" icon="OctagonAlert">
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>
    Your profile has been updated successfully.
  </AlertDescription>
</Alert>;

Warning

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
<Alert variant="warning" icon="OctagonAlert">
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>
    Your profile has been updated successfully.
  </AlertDescription>
</Alert>;

Brand

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
<Alert variant="brand" icon="OctagonAlert">
  <AlertTitle>Information</AlertTitle>
  <AlertDescription>
    Your profile has been updated successfully.
  </AlertDescription>
</Alert>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Base UI.

Prop	Type	Default	Description
`icon`	`keyof typeof extendedIcons`	`—`	Icon to display on the alert
`variant`	`"default" \| "destructive" \| "info" \| "success" \| "warning" \| "brand"`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.