Alert

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

Import

import { Alert, AlertTitle, AlertDescription } from '@nostromo/ui-core'
// or
import { Alert, AlertTitle, AlertDescription } from '@nostromo/ui-core/alert'

Usage

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

Live Examples

Live Example

☀️

Copy

Storybook →

View Code

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

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

Pagination Toast