Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Implementation

import { Alert } from "slipstream-ui";

const Example = () => <Alert>I am a message</Alert>;

Colors

Change component background color to any color provided by tailwind. Defaults to the "100" level shade.

Example

Gray (color="gray")

Red (color="red")

Yellow (color="yellow")

Green (color="green")

Blue (color="blue")

Indigo (color="indigo")

Purple (color="purple")

Pink (color="pink")

<Alert color="blue">Blue Message</Alert>

Sizing

Example

Small (size="sm")

Medium (size="md")

Large (size="lg")

<Alert size="md">Sizing - Medium</Alert>

Dark

Convert lighter alert to a darker shade

Example

Default

Dark

<Alert dark>Dark Message</Alert>

onClick

Enabled a close icon that can be clicked on to initiate an action.

Example

Click the icon

<Alert onClick={() => {}}>Click the icon</Alert>

Props

Attribute	Type	Value	Default Value	Description
color	string	e.g. blue	blue	Define color resulting in bg-[color]-100. Setting color to black or white will override shade and dark props.
shade	string	100/200/etc...		Override default background shade and dark shade
dark	boolean	true/false	false	Changes postfix of color to bg-[color]-500
size	string	sm/md/lg	sm	Set padding and text sizing of component
onClick	function			Enables a close icon with click functionality