Alert

Heads up

A new version is available.

Saved successfully.

Your trial ends in 3 days.

Payment failed

The card was declined.


import { Alert } from '@gg-software/ui';
 
<Alert tone="info" title="Heads up">A new version is available.</Alert>
<Alert tone="warning" closable onClose={() => dismiss()}>Your trial ends in 3 days.</Alert>
<Alert tone="error" title="Payment failed" action={<Button size="sm" danger>Retry</Button>}>
    The card was declined.
</Alert>
 
// full-width banner style, custom/hidden icon
<Alert banner icon={false}>Scheduled maintenance tonight.</Alert>

For transient notifications use Toast.

Props

Prop	Type	Default	Description
`tone`	`"info" \| "success" \| "warning" \| "error"`	`info`
`title`	`ReactNode`	—
`children`	`ReactNode`	—	content rendered inside the component
`icon`	`ReactNode`	—	custom icon, or `false` to hide it
`closable`	`boolean`	`false`
`onClose`	`(() => void)`	—
`banner`	`boolean`	`false`
`action`	`ReactNode`	—
`className`	`string`	—

* required · generated from packages/ui/src/display/Alert/Alert.tsx