Alert

V 1.0View in Storybook

Inline alert with 4 colour variants, optional leading + trailing icons, and up to 2 action buttons.

Playground

Variant

Title

Description

Leading Icon

Leading Icon Type

Trailing Icon

Show Action

Show Action1

Action1 Label

Action1 Show Icon

Show Action2

Action2 Label

Action2 Show Icon

URL

https://design-system-ashu.vercel.app/iframe.html?id=components-alert--playground&viewMode=story&args=variant%3Adefault%3Btitle%3ANew+App+version+available%3Bdescription%3AUpdate+your+app+now+to+experience+latest+features+on+the+app%3BleadingIcon%3A%21true%3BleadingIconType%3Ainfo%3BtrailingIcon%3A%21true%3BshowAction%3A%21true%3BshowAction1%3A%21true%3Baction1Label%3ALearn+more%3Baction1ShowIcon%3A%21false%3BshowAction2%3A%21true%3Baction2Label%3AButton+Text%3Baction2ShowIcon%3A%21true

Code

<Alert
  variant="default"
  title="New App version available"
  description="Update your app now to experience latest features on the app"
  leadingIcon
  leadingIconType="info"
  trailingIcon
  showAction
  showAction1
  action1Label="Learn more"
  action1ShowIcon={false}
  showAction2
  action2Label="Button Text"
  action2ShowIcon
/>

Props

Name	Type	Default
`variant`	`'default' \| 'success' \| 'warning' \| 'danger'`	`'default'`
`title`	`string`	`'New App version available'`
`description`	`string`	`'Update your app now to experience latest features on the app'`
`leadingIcon`	`boolean`	`true`
`leadingIconType`	`'info' \| 'warning' \| 'warning2' \| 'star'`	`'info'`
`trailingIcon`	`boolean`	`true`
`showAction`	`boolean`	`true`
`showAction1`	`boolean`	`true`
`action1Label`	`string`	`'Learn more'`
`action1ShowIcon`	`boolean`	`false`
`showAction2`	`boolean`	`true`
`action2Label`	`string`	`'Button Text'`
`action2ShowIcon`	`boolean`	`true`

Usage guidelines

When to use

Use to surface contextual feedback — confirmations, warnings, or errors — directly within a page or form.
Pair a leading icon with the matching variant colour for instant visual scanning.
Include action buttons when the user needs to respond or act on the message.

When not to use

Don't use for critical errors that block the whole screen — use a full-page state instead.
Avoid stacking multiple alerts; consolidate into one or use a toast queue.
Don't replace form field validation errors; show those inline beneath the field.