Alert
An information box.
The Alert component serves the purpose of presenting information to the user. It can display a concise message and can be customized to draw the user's attention by modifying its color, size and other properties.
import { Alert } from '@rewind-ui/core';
function App() {
return (
<Alert color="purple" iconType="info" title="Critical information!">
Our website uses cookies to improve your experience. By continuing to use our website, you agree to our use of cookies.
</Alert>
);
}
Import
Import the Alert
component using the following import statement.
import { Alert } from '@rewind-ui/core';
Variants
The Alert
component comes with a number of pre-defined variants that can be used to change the appearance of the component. The variants can be used by passing the variant name as a prop to the component. A variant is basically a pre-set set of properties. Read more about variants here.
Available variants are: primary
, secondary
, tertiary
, danger
, success
, warning
and info
.
<View>
<Alert variant="primary" title="Alert!">This is a primary alert</Alert>
<Alert variant="secondary" title="Alert!">This is a secondary alert</Alert>
<Alert variant="tertiary" title="Alert!">This is a tertiary alert</Alert>
<Alert variant="danger" title="Alert!">This is a danger alert</Alert>
<Alert variant="success" title="Alert!">This is a success alert</Alert>
<Alert variant="warning" title="Alert!">This is a warning alert</Alert>
<Alert variant="info" title="Alert!">This is an info alert</Alert>
</View>
Tones & Colors
The Alert
component comes with four tones: solid
, light
and outline
.
The available color
values are: white
, blue
, red
, green
, yellow
, purple
, gray
, dark
and black
.
Solid
<View>
<Alert color="white">White</Alert>
<Alert color="blue">Blue</Alert>
<Alert color="red">Red</Alert>
<Alert color="green">Green</Alert>
<Alert color="yellow">Yellow</Alert>
<Alert color="purple">Purple</Alert>
<Alert color="gray">Gray</Alert>
<Alert color="dark">Dark</Alert>
<Alert color="black">Black</Alert>
</View>
Light
<View>
<Alert tone="light" color="white">White</Alert>
<Alert tone="light" color="blue">Blue</Alert>
<Alert tone="light" color="red">Red</Alert>
<Alert tone="light" color="green">Green</Alert>
<Alert tone="light" color="yellow">Yellow</Alert>
<Alert tone="light" color="purple">Purple</Alert>
<Alert tone="light" color="gray">Gray</Alert>
<Alert tone="light" color="dark">Dark</Alert>
<Alert tone="light" color="black">Black</Alert>
</View>
Outline
<View>
<Alert tone="outline" color="white">White</Alert>
<Alert tone="outline" color="blue">Blue</Alert>
<Alert tone="outline" color="red">Red</Alert>
<Alert tone="outline" color="green">Green</Alert>
<Alert tone="outline" color="yellow">Yellow</Alert>
<Alert tone="outline" color="purple">Purple</Alert>
<Alert tone="outline" color="gray">Gray</Alert>
<Alert tone="outline" color="dark">Dark</Alert>
<Alert tone="outline" color="black">Black</Alert>
</View>
Accents
Available accent
values are: top
, bottom
, left
and right
.
Solid
<View>
<Alert color="dark" tone="solid" accent="top">Top accent alert</Alert>
<Alert color="dark" tone="solid" accent="bottom">Bottom accent alert</Alert>
<Alert color="dark" tone="solid" accent="left">Left accent alert</Alert>
<Alert color="dark" tone="solid" accent="right">Right accent alert</Alert>
</View>
Light
<View>
<Alert color="dark" tone="light" accent="top">Top accent alert</Alert>
<Alert color="dark" tone="light" accent="bottom">Bottom accent alert</Alert>
<Alert color="dark" tone="light" accent="left">Left accent alert</Alert>
<Alert color="dark" tone="light" accent="right">Right accent alert</Alert>
</View>
Outline
<View>
<Alert color="dark" tone="outline" accent="top">Top accent alert</Alert>
<Alert color="dark" tone="outline" accent="bottom">Bottom accent alert</Alert>
<Alert color="dark" tone="outline" accent="left">Left accent alert</Alert>
<Alert color="dark" tone="outline" accent="right">Right accent alert</Alert>
</View>
Sizes
Available size
values are: xs
, sm
, md
and lg
.
<View>
<Alert size="xs">Alert</Alert>
<Alert size="sm">Alert</Alert>
<Alert size="md">Alert</Alert>
<Alert size="lg">Alert</Alert>
</View>
Radiuses
Available radius
values are: none
, sm
, md
, lg
and full
.
<View>
<Alert radius="none">Alert</Alert>
<Alert radius="sm">Alert</Alert>
<Alert radius="md">Alert</Alert>
<Alert radius="lg">Alert</Alert>
<Alert radius="full">Alert</Alert>
</View>
Shadows
Available shadow
values are: none
, xs
, sm
, md
and lg
.
<View>
<Alert shadow="none">Alert</Alert>
<Alert shadow="sm">Alert</Alert>
<Alert shadow="base">Alert</Alert>
<Alert shadow="md">Alert</Alert>
<Alert shadow="lg">Alert</Alert>
<Alert shadow="xl">Alert</Alert>
</View>
Shadow colors
Available shadowColor
values are: blue
, red
, green
, yellow
, purple
, gray
, dark
and black
.
<View>
<Alert shadow="md" color="blue" shadowColor="blue">Alert</Alert>
<Alert shadow="md" color="red" shadowColor="red">Alert</Alert>
<Alert shadow="md" color="green" shadowColor="green">Alert</Alert>
<Alert shadow="md" color="yellow" shadowColor="yellow">Alert</Alert>
<Alert shadow="md" color="purple" shadowColor="purple">Alert</Alert>
<Alert shadow="md" color="gray" shadowColor="gray">Alert</Alert>
<Alert shadow="md" color="dark" shadowColor="dark">Alert</Alert>
<Alert shadow="md" color="black" shadowColor="black">Alert</Alert>
</View>
Title
A title can be added to the alert by using the title
prop.
<View>
<Alert title="Informative Alert">This is a simple informative alert. It has a title, an icon, and some content.</Alert>
</View>
Icon types
The Alert
component comes with a set of icons that can be used to represent the type of the toast.
Available iconType
values are: info
, success
, warning
, error
and question
.
<View>
<Alert iconType="info" color="purple" title="Alert">This is the info type</Alert>
<Alert iconType="success" color="green" title="Alert">This is the success type</Alert>
<Alert iconType="warning" color="yellow" title="Alert">This is the warning type</Alert>
<Alert iconType="error" color="red" title="Alert">This is the error type</Alert>
<Alert iconType="question" color="blue" title="Alert">This is the question type</Alert>
<Alert iconType="loading" color="purple" title="Alert">This is the loading type</Alert>
</View>
Custom Icon
A custom icon can be added to the alert by using the icon
prop.
<View>
<Alert icon={<WarningCircle weight="duotone" className="w-8 h-8 mt-1" />} color="purple" title="Informative Alert">This is a simple informative alert. It has a title, an icon and some content.</Alert>
</View>
Dismiss
A dismiss button can be added to the alert by using the dismissable
prop. By default, a fading animation is applied to the alert when it is dismissed. This can be disabled by using the dismissableAnimation
prop.
<View>
<Alert variant="info" icon={<WarningCircle weight="duotone" className="w-8 h-8 mt-1" />} title="Informative Alert" dismissable>This is a simple informative alert. It has a title, an icon, and some content.</Alert>
</View>
Examples
Max width
<View>
<Alert className="max-w-[250px]">Alert</Alert>
</View>
Central alignment
<View>
<Alert className="max-w-[250px] mx-auto">Alert</Alert>
</View>
Classname overrides
To avoid completely overwriting the default styles, the className
prop can be used to override the default classes. Rewind-UI is using tailwind-merge to merge the default classes with the classes you provide in the className
prop and resolve any possible conflicts.
<View>
<Alert
title="Informative Alert"
iconType="info"
tone="light"
color="purple"
className="border border-2 border-dashed border-purple-700"
>This is a simple informative alert. It has a title, an icon and some content.</Alert>
</View>
Watch out!
Here is some custom JSX content. You can use any component you want here, including Buttons, Text, etc. Furthermore you can use any Tailwind CSS classes you want.<View>
<Alert tone="light" color="red" size="lg" shadow="base" className="border">
<div className="grid gap-y-3 justify-items-center text-red-600 w-full">
<WarningCircle weight="duotone" className="w-16 h-16" />
<Text variant="h3" className="text-red-600">Watch out!</Text>
<div className="border-b border-b-2 border-dashed border-red-200 w-full" />
<Text size="base" className="text-center text-red-600">Here is some custom JSX content. You can use any component you want here, including Buttons, Text, etc. Furthermore you can use any Tailwind CSS classes you want.</Text>
<div className="flex gap-x-2">
<Button tone="outline" color="red">Cancel</Button>
<Button variant="danger">Confirm</Button>
</div>
</div>
</Alert>
</View>
API Reference
Properties
Prop | Type | Description | Default |
---|---|---|---|
accent | AlertAccent | Sets a border on the given side | none |
color | AlertColor | Sets the color | dark |
dismissable | boolean | Adds a dismiss button | false |
dismissableAnimation | boolean | Adds a fading animation when the alert is dismissed | false |
icon | ReactNode | Adds an icon on the left side of the alert | undefined |
iconType | AlertIconType | Sets the icon type | undefined |
radius | AlertRadius | Sets the border radius | md |
shadow | AlertShadow | Sets the shadow size | none |
shadowColor | AlertShadowColor | Sets the shadow color | none |
size | AlertSize | Sets the alert size | md |
title | string | Sets the alert title | solid |
tone | AlertTone | Sets the alert tone | solid |
variant | AlertVariant | Sets the alert variant | true |
Types
type AlertAccent = 'none' | 'top' | 'right' | 'bottom' | 'left';
type AlertColor =
| 'white'
| 'blue'
| 'red'
| 'green'
| 'yellow'
| 'purple'
| 'gray'
| 'dark'
| 'black';
type AlertIconType = 'info' | 'success' | 'warning' | 'error' | 'question' | 'loading';
type AlertRadius = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'full';
type AlertShadow = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl';
type AlertShadowColor =
| 'none'
| 'white'
| 'blue'
| 'red'
| 'green'
| 'yellow'
| 'purple'
| 'gray'
| 'dark'
| 'black';
type AlertSize = 'xs' | 'sm' | 'md' | 'lg';
type AlertTone = 'solid' | 'light' | 'outline';
type AlertVariant =
| 'primary'
| 'secondary'
| 'tertiary'
| 'danger'
| 'success'
| 'warning'
| 'info';
Accessibility
The Alert
component adheres to the WAI-ARIA Alert Pattern.