Skip to content
Stylus UI

Alert

New
A persistent message communicating state in response to a user action.

Usage

To display an alert, pass a title and an optional description.

import { Alert } from "stylus-ui/Alert";


export default () => (
  <Alert
    title="There was an error connecting to Confluence."
    description="Please try again. If the issue persists, you can reconnect manually."
  />
);

Colors

The default gray alert can be changed to other colors using the variant prop. Pass info, success, warning, or error to change the alert background and default icon.

 
import { Alert } from "stylus-ui/Alert";


export default () => (
  <div className="flex w-full flex-col gap-2">
    <Alert
      title="There was an error connecting to Confluence."
      description="Please try again. If the issue persists, you can reconnect manually."
      variant="info" // Same as default
    />
    <Alert
      title="There was an error connecting to Confluence."
      description="Please try again. If the issue persists, you can reconnect manually."
      variant="success"
    />
    <Alert
      title="There was an error connecting to Confluence."
      description="Please try again. If the issue persists, you can reconnect manually."
      variant="warning"
    />
    <Alert
      title="There was an error connecting to Confluence."
      description="Please try again. If the issue persists, you can reconnect manually."
      variant="error"
    />
  </div>
);

Dark mode

Set theme to dark to display the alert on a dark background.

 
import { Alert } from "stylus-ui/Alert";


export default () => (
  <div className="flex w-full flex-col gap-2">
    <Alert
      title="There was an error connecting to Confluence."
      description="Please try again. If the issue persists, you can reconnect manually."
      variant="info"
      theme="dark"
    />
    <Alert
      title="There was an error connecting to Confluence."
      description="Please try again. If the issue persists, you can reconnect manually."
      variant="success"
      theme="dark"
    />
    <Alert
      title="There was an error connecting to Confluence."
      description="Please try again. If the issue persists, you can reconnect manually."
      variant="warning"
      theme="dark"
    />
    <Alert
      title="There was an error connecting to Confluence."
      description="Please try again. If the issue persists, you can reconnect manually."
      variant="error"
      theme="dark"
    />
  </div>
);

Icon

For consistency, all alerts display an icon. However, the default icon can be overridden. Import an icon from FontAwesome and pass it to icon.

import { Alert } from "stylus-ui/Alert";
import { faAlien } from "@fortawesome/pro-regular-svg-icons";


export default () => (
  <Alert title="An unknown error occurred." icon={faAlien} />
);

Actions

To render buttons beneath the description, pass an array of ButtonProps to the actions prop.

import { Alert } from "stylus-ui/Alert";


export default () => (
  <Alert
    title="There was an error connecting to Confluence."
    description="Please try again. If the issue persists, you can reconnect manually."
    variant="warning"
    actions={[
      { children: "Reconnect", onClick: () => {} },
      { children: "Dismiss", onClick: () => {} },
    ]}
  />
);

Lists

If you need to display a list of items—for example, a list of errors—pass an array of strings to descriptionList.

import { Alert } from "stylus-ui/Alert";


export default () => (
  <Alert
    title="We couldn't submit your form."
    description="Please fix the following errors and try again:"
    descriptionList={[
      "Title is required",
      "Description is required",
      "Date is required",
    ]}
    variant="error"
  />
);

Sizing

Alert will automatically shrink padding and text size when beneath 384px wide.

Example available on wider screens

API Reference

Alert

Inherits properties from HTMLElement.

Prop
Type
Default
title Required string
actions ButtonProps[]
description string
descriptionList string[]
icon IconProp
theme "light""dark" "light"
variant "info""success""warning""error" "info"