7onicDESIGN SYSTEM

Alert

A notification component for communicating important information or feedback. Automatically applies status-appropriate icons and colors for info, success, warning, and error messages.

3
Variants
3
Sizes
4
Colors
Pure
React

Playground

Preview
defaultinfo
Heads up!

You can add components to your app using the CLI.

Variant
Color
Size
Options
<Alert>
  <Alert.Title>Heads up!</Alert.Title>
  <Alert.Description>
    You can add components to your app using the CLI.
  </Alert.Description>
</Alert>

Variants

Alert
Default
Tint background with a subtle border — for general notifications
General info
Alert
Outline
Border only, transparent background — for minimal visual weight
Light notice
Alert
Filled
Solid background — for strong visual emphasis
Critical warning

Sizes

sm
Padding12px
Title13px
Description12px
Icon16px
default
Padding16px
Title14px
Description13px
Icon18px
lg
Padding20px
Title16px
Description14px
Icon20px

Colors

Information

A new software update is available. See what's new in version 3.0.

Success

Your changes have been saved successfully.

Warning

Your trial period will expire in 3 days.

Features

Closable

closableenables the close button. UseonCloseto receive the callback.

Saved!

Your changes have been saved.

<Alert color="success" closable onClose={() => setVisible(false)}>
  <Alert.Title>Saved!</Alert.Title>
  <Alert.Description>Your changes have been saved.</Alert.Description>
</Alert>

Custom Icon

iconsets a custom icon, andhideIconhides the icon.

New feature available!

Check out the latest updates.

Simple message without icon

This alert has no icon.

{/* Custom icon */}
<Alert icon={<Rocket className="icon-md" />}>
  <Alert.Title>New feature!</Alert.Title>
</Alert>

{/* No icon */}
<Alert hideIcon>
  <Alert.Title>Simple message</Alert.Title>
</Alert>

Variant × Color Matrix

All 12 combinations across 3 variants and 4 colors

default

Info

This is a default info alert.

Success

This is a default success alert.

Warning

This is a default warning alert.

outline

Info

This is a outline info alert.

Success

This is a outline success alert.

Warning

This is a outline warning alert.

filled

Info

This is a filled info alert.

Success

This is a filled success alert.

Warning

This is a filled warning alert.

API

Component Structure

Alert— Pure React
.Title.Description

Props

Alert (Root)

variant"default"
"default" | "outline" | "filled"

Visual variant (default: tint background, outline: border only, filled: solid)

color"info"
"info" | "success" | "warning" | "error"

Semantic color — auto-determines icon, color, and ARIA role

size"default"
"sm" | "default" | "lg"

Size — controls padding, font, and icon together

closablefalse
boolean

Shows the close button

onCloseundefined
() => void

Callback for the close button

closeIconundefined
ReactNode

Custom close icon

iconauto (by color)
ReactNode

Custom status icon

hideIconfalse
boolean

Hides the icon

radius"lg"
"none" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"

Border radius

Alert.Title

childrenundefined
ReactNode

Title text

classNameundefined
string

Additional CSS class

Alert.Description

childrenundefined
ReactNode

Description text

classNameundefined
string

Additional CSS class

Anatomy

1
2
3
4
5
1
Root
Alert container
2
Icon
Status icon
3
Title
Title
4
Description
Description text
5
Close
Close button

Best Practices

✓

Do

  • ✓Use the appropriate color for the status
  • ✓Communicate the message concisely with a title and description
  • ✓Use closable for temporary notifications
✕

Don't

  • ✕Don't display too many Alerts on one page
  • ✕Don't use the default variant for critical errors — use filled
  • ✕Don't use Alert for temporary notifications — use Toast
  • ✕Don't use Alert when user confirmation is required — use Modal

Alert vs Toast

Both are used for user notifications, but differ in persistence and interaction.

Display

Alert: Fixed in page (persistent)

Toast: Temporary — disappears automatically

Trigger

Alert: On page load or state change

Toast: After user action — as feedback

Content

Alert: Title + description (rich)

Toast: Short message (1–2 lines)

Dismiss

Alert: Manual (closable) or always shown

Toast: Auto-dismissed (after a few seconds)

Use case

Alert: System state, warnings, errors

Toast: Save complete, copy complete, etc.

ARIA

Alert: role="alert" / role="status"

Toast: role="status" + aria-live

Key distinction: Use Alert for persistent in-page status notifications. Use Toast for temporary feedback from user actions.

Accessibility

ARIA / WCAG

  • role="alert" auto-applied on error
  • role="status" for info/success/warning
  • Close button includes aria-label="Close"
  • Decorative icons include aria-hidden="true"