React Alert Component API

Alert API

Explore the API reference for the React Alert component and discover how to effectively utilize its props for customization.

On this page

jsx

import { CAlert } from '@coreui/react'

Property	Default	Type
ariaCloseLabel5.13.0+	`Close`	`string`
Sets the `aria-label` of the dismissible close button.
className	-	`string`
A string of all className you want applied to the component.
color	`primary`	`'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `string`
Sets the color context of the component to one of CoreUI’s themed colors.
dismissible	-	`boolean`
Optionally add a close button to alert and allow it to self dismiss.
onClose	-	`(() => void)`
Callback fired when the component requests to be closed.
onClosed5.13.0+	-	`(() => void)`
Callback fired when the component has been closed and the CSS transition has completed.
transition5.13.0+	`true`	`boolean`
Set whether the alert fades in and out when it is shown and hidden. Set to `false` to make it appear and disappear without a fade animation.
variant	-	`string`
Set the alert variant to a solid.
visible	`true`	`boolean`
Toggle the visibility of component.

jsx

import { CAlertHeading } from '@coreui/react'

Property	Default	Type
as	`h4`	`(ElementType & 'symbol') \| (ElementType & 'object') \| (ElementType & 'h4') \| (ElementType & 'slot') \| (ElementType & 'style') \| ... 175 more ...`
Component used for the root node. Either a string to use a HTML element or a component.
className	-	`string`
A string of all className you want applied to the base component.

jsx

import { CAlertLink } from '@coreui/react'

Property	Default	Type
className	-	`string`
A string of all className you want applied to the base component.