Alert

Announce important messages.

An important message.

<CAlert>An important message.</CAlert>

<CAlert>An important message.</CAlert>

Config

defaultClass

• type: string

Class applied to all CAlert components.

variants

• type: object

Predefined set of styling variants.

For example:

{
  error: 'bg-red-200 text-red-900',
  warning: 'bg-orange-200 text-orange-900',
  success: 'bg-success-200 text-success-900',
}

API

Name	Type	Default	Description
Props
variant	string	null	Customize the alert appearance by applying a variant defined in the config (alert.variants).

Examples

With style variant

Apply one or multiple pre-defined styling variants (separated by a space) defined in the component config.

An important message.

<CAlert variant="error">An important message.</CAlert>

<CAlert variant="error">An important message.</CAlert>

An important inline message.

<CAlert variant="warning inline">An important inline message.</CAlert>

<CAlert variant="warning inline">An important inline message.</CAlert>