# Alert
Announce important messages.
# Config
The options below are to be set in the global configuration at the following location:
{
components: {
picture: {
// ...
}
}
}
# class
Classes applied to the component root element, except when the prop bare
is set to true
. See styling components.
- type:
Array<String | Object> | Object | String | (props: Object) => {}
- default:
null
# Example
class({ variant }) {
return ['alert', {
'alert--error': variant?.includes('error'),
'alert--warning': variant?.includes('warning'),
}]
}
# API
CAlert
Name | Type | Default | Description |
---|---|---|---|
Props | |||
variant | string|array | null | Useful when used in the component config |
bare | boolean | false | Disable class inheritance from the component config. See styling components. |
# Examples
# Simplest
<CAlert>An important message.</CAlert>
# With variant
<CAlert variant="error">An important message.</CAlert>