# 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 class option, to style it conditionally. See styling components.

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>