Alert

A status message component for displaying feedback to users.

Info

This is an informational message.

Success

Operation completed successfully.

Warning

Please review before proceeding.

Error

Something went wrong.

Import


import { Alert } from '@grannyshot/ui'

Usage


<Alert variant="info" title="Info">
  This is an informational message.
</Alert>

Variants


<Alert variant="info" title="Info">Informational message.</Alert>
<Alert variant="success" title="Success">Operation completed.</Alert>
<Alert variant="warning" title="Warning">Please review.</Alert>
<Alert variant="error" title="Error">Something went wrong.</Alert>

Without Title


<Alert variant="info">A simple alert without a title.</Alert>

Without Icon


<Alert variant="success" title="Done" icon={false}>
  Custom alert without icon.
</Alert>

API Reference

Prop	Type	Default	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'error'`	`'info'`	Visual style
`title`	`ReactNode`	—	Alert title
`icon`	`ReactNode \| false`	auto	Custom icon, or `false` to hide
`className`	`string`	—	Additional CSS classes
`children`	`ReactNode`	—	Alert description

Extends all native <div> HTML attributes.