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>
<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

PropTypeDescriptionDefault
accentAlertAccentSets a border on the given sidenone
colorAlertColorSets the colordark
dismissablebooleanAdds a dismiss buttonfalse
dismissableAnimationbooleanAdds a fading animation when the alert is dismissedfalse
iconReactNodeAdds an icon on the left side of the alertundefined
iconTypeAlertIconTypeSets the icon typeundefined
radiusAlertRadiusSets the border radiusmd
shadowAlertShadowSets the shadow sizenone
shadowColorAlertShadowColorSets the shadow colornone
sizeAlertSizeSets the alert sizemd
titlestringSets the alert titlesolid
toneAlertToneSets the alert tonesolid
variantAlertVariantSets the alert varianttrue

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.