Alert

Alert component is used to display contextual feedback messages with support for different variants, sizes, actions and dismissible mode.

Base example

Default! Your changes have been saved

This is an alert with icon, title and description.

<Alert
  title="Default! Your changes have been saved"
  description="This is an alert with icon, title and description."
/>

Variants

Variant: brand

Brand!

This is a brand alert.

<Alert
  variant="brand"
  title="Brand!"
  description="This is a brand alert."
/>

Variant: gray

Gray!

This is a gray alert.

<Alert
  variant="gray"
  title="Gray!"
  description="This is a gray alert."
/>

Variant: error

Error!

This is a error alert.

<Alert
  variant="error"
  title="Error!"
  description="This is a error alert."
/>

Variant: warning

Warning!

This is a warning alert.

<Alert
  variant="warning"
  title="Warning!"
  description="This is a warning alert."
/>

Variant: success

Success!

This is a success alert.

<Alert
  variant="success"
  title="Success!"
  description="This is a success alert."
/>

Sizes

Size: floating

Success!

This is an alert with size "floating".

<Alert
  size="floating"
  variant="success"
  title="Success!"
  description="This is an alert with size 'floating'."
/>

Size: with-full

Success!

This is an alert with size "with-full".

<Alert
  size="with-full"
  variant="success"
  title="Success!"
  description="This is an alert with size 'with-full'."
/>

Dismissible

Closable alert

You can dismiss this alert.

<Alert
  dismissible
  title="Closable alert"
  description="You can dismiss this alert."
/>

With actions

Actionable alert

This alert has actions.

<Alert
  title="Actionable alert"
  description="This alert has actions."
  firstActionLabel="Undo"
  firstActionClick={() => console.log("Undo clicked")}
  secondActionLabel="Retry"
  secondActionClick={() => console.log("Retry clicked")}
/>

API Reference

Props	Type	Default	Description
title	string	-	Main title of the alert
description?	React.ReactNode	-	Additional text or content
variant?	"default" \| "brand" \| "gray" \| "error" \| "warning" \| "success"	default	Defines the alert style
size?	"floating" \| "with-full"	floating	Defines layout size
icon?	React.ReactElement	<InfoCircle /> \| <CheckCircle />	Custom icon
firstActionLabel?	string	-	Label for first action
firstActionClick?	() => void	-	Callback for first action
secondActionLabel?	string	-	Label for second action
secondActionClick?	() => void	-	Callback for second action
dismissible?	boolean	false	Whether the alert can be dismissed
className?	string	-	Additional CSS classes