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.

Source code

Theme

Variants

Storybook

Critical information!Our website uses cookies to improve your experience. By continuing to use our website, you agree to our use of cookies.

Tone

Accent

Color

Size

Shadow

Shadow Color

Radius

Icon type

Dismissable

Dismissable animation

Title

import { Alert } from '@almond-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 '@almond-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.

Alert!This is a primary alert

Alert!This is a secondary alert

Alert!This is a tertiary alert

Alert!This is a danger alert

Alert!This is a success alert

Alert!This is a warning alert

Alert!This is an info alert

<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

White

Blue

Red

Green

Yellow

Purple

Gray

Dark

Black

<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

White

Blue

Red

Green

Yellow

Purple

Gray

Dark

Black

<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

White

Blue

Red

Green

Yellow

Purple

Gray

Dark

Black

<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

Top accent alert

Bottom accent alert

Left accent alert

Right accent alert

<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

Top accent alert

Bottom accent alert

Left accent alert

Right accent alert

<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

Top accent alert

Bottom accent alert

Left accent alert

Right accent alert

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

Alert

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

Alert

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

Alert

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

Alert

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

Informative AlertThis is a simple informative alert. It has a title, an icon, and some content.

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

AlertThis is the info type

AlertThis is the success type

AlertThis is the warning type

AlertThis is the error type

AlertThis is the question type

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

Custom Icon

A custom icon can be added to the alert by using the icon prop.

Informative AlertThis is a simple informative alert. It has a title, an icon and some content.

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

Informative AlertThis is a simple informative alert. It has a title, an icon, and some content.

<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

Alert

<View>
  <Alert className="max-w-[250px]">Alert</Alert>
</View>

Central alignment

Alert

<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. Almond-UI is using tailwind-merge to merge the default classes with the classes you provide in the className prop and resolve any possible conflicts.

Informative AlertThis is a simple informative alert. It has a title, an icon and some content.

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

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.

Accordion Avatar