Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • How to Read This Documentation
    • Composition Philosophy
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Alert

yarn add @clayui/alert

Alerts are used to capture the attention of the user in an intrusive way.

  • Examples
  • Markup
  • API

Stable3.85.0View in LexiconCHANGELOGstorybook demos

  • Alert
  • Alert.ToastContainer

Alert

PropertyDescription
actions
React.ReactNode
A React Component to render the alert actions.
autoClose
boolean | number
Flag to indicate alert should automatically call onClose. It also accepts a duration (in ms) which indicates how long to wait. If true is passed in, the timeout will be 10000ms.
onClose
() => void
Callback function for when the 'x' is clicked.
role
string | null
The alert role is for important, and usually time-sensitive, information.

The default value is 'alert'
displayType
| 'danger' | 'info' | 'secondary' | 'success' | 'warning'
Determines the style of the alert.

The default value is 'info'
hideCloseIcon
boolean
Flag to indicate if close icon should be show. This prop is used in conjunction with the onCloseprop;

The default value is false
spritemap
string
Path to the spritemap that Icon should use when referencing symbols.
symbol
string
The icon's symbol name in the spritemap.
title
string
The summary of the Alert, often is something like 'Error' or 'Info'.
variant
'feedback' | 'stripe' | 'inline'
Determines the variant of the alert.

Alert.ToastContainer

PropertyDescription
children
| React.ReactElement<IClayAlertProps> | Array<React.ReactElement<IClayAlertProps>>
Children of the ToastContainer must be a ClayAlert

How can this be improved? Create an issue!