Alert

The Alert component provides you with notifications and warnings for your application.

Live Examples

Live Example

☀️

Copy

View Code

import { Alert, AlertDescription, AlertTitle } from '@jarllyng/nostromo' export default function AlertExamples() { return ( <div className="space-y-4"> <Alert> <AlertTitle>Information</AlertTitle> <AlertDescription> This is an informative message. </AlertDescription>...

Import


import { Alert, AlertTitle, AlertDescription } from "@jarllyng/nostromo";
// or
import { Alert, AlertTitle, AlertDescription } from "@jarllyng/nostromo/alert";

Usage


import { Alert, AlertTitle, AlertDescription } from "@jarllyng/nostromo";
 
export default function Example() {
  return (
    <Alert variant="default">
      <AlertTitle>Information</AlertTitle>
      <AlertDescription>This is an informative message.</AlertDescription>
    </Alert>
  );
}

Props

Alert

Prop	Type	Default	Required	Description
`variant`	`"default" \| "destructive" \| "success" \| "warning" \| "info"`	`"default"`	No	Visual variant of the alert
`size`	`"sm" \| "default" \| "lg"`	`"default"`	No	Size of the alert
`title`	`string`	`undefined`	No	Alert title (alternative to AlertTitle component)
`description`	`string`	`undefined`	No	Alert description (alternative to AlertDescription component)
`dismissible`	`boolean`	`false`	No	Whether the alert can be dismissed
`onDismiss`	`() => void`	`undefined`	No	Callback when alert is dismissed
`icon`	`React.ReactNode`	`undefined`	No	Custom icon to display
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Alert content (AlertTitle, AlertDescription)

AlertTitle

Prop	Type	Default	Required	Description
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Title content

AlertDescription

Prop	Type	Default	Required	Description
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Description content