Runway

This is an info message.

This is a success message.

This is a warning message.

This is a danger message.

The Alert component is a simple yet effective way to display important messages to users. It supports various severity levels, including info, success, warning, and error, allowing you to convey the urgency of the message effectively.

Usage

javascript
1import Alert from '@/components/atoms/Alert';
2
3<Alert severity="info">This is an info message.</Alert>

Props

Prop	Type	Default	Description
children	ReactNode	-	Content to be displayed inside the alert component
severity	"info" \| "success" \| "warning" \| "error"	`"info"`	Severity level of the alert component (info, success, warning, error)
variant	"soft" \| "solid"	`"soft"`	Variant style of the alert component
lift	boolean	`false`	Whether to lift the alert component on hover
scale	boolean	`false`	If `true`, gently scales up on hover.
lift	boolean	`false`	If `true`, lifts on hover.
active	boolean	`true`	If `true`, the button has an active press-down scale effect.
border	boolean	`false`	Whether to show a border around the alert component
onClick	function	-	Function to call when the alert is clicked
className	string	`""`	Additional Tailwind classes (overrides defaults)
...props	object	-	Any other valid HTML `<div>` attributes (e.g. `role`, `aria-*`, etc.).

Examples

1. Basic Alert

Just provide a severity prop.

This is an info message.

This is a success message.

This is a warning message.

This is a danger message.

Make Alert clickable by adding an onClick prop.

2. Styled Alert

You can customize the alert with variants, borders and additional Tailwind classes.

This is a soft alert with a border.

This is a soft alert with custom background color.

3. Hover Alert

You can add a hover effect to the alert by setting the lift or scale prop.

This is an info message.

This is a success message.

This is a warning message.