cotton

Alert

Display an inline contextual banner to communicate status, feedback or important information.

Basic Usage

The default info variant renders a tinted, bordered banner with a leading icon and your message in the default slot.

<c-ui.alert>A new version of the dashboard is available.</c-ui.alert>
{% cotton ui.alert %}A new version of the dashboard is available.{% endcotton %}

Variants

Use the variant prop to convey meaning. Choose from info, success, warning and error.

<c-ui.alert variant="info">Your changes have been saved as a draft.</c-ui.alert>
<c-ui.alert variant="success">Your payment was processed successfully.</c-ui.alert>
<c-ui.alert variant="warning">Your subscription expires in 3 days.</c-ui.alert>
<c-ui.alert variant="error">We could not connect to the server.</c-ui.alert>
{% cotton ui.alert variant="info" %}Your changes have been saved as a draft.{% endcotton %}
{% cotton ui.alert variant="success" %}Your payment was processed successfully.{% endcotton %}
{% cotton ui.alert variant="warning" %}Your subscription expires in 3 days.{% endcotton %}
{% cotton ui.alert variant="error" %}We could not connect to the server.{% endcotton %}

Appearances

Three visual treatments, shared with toast: soft (default), solid and outline.

<c-ui.alert variant="success" appearance="soft">Soft tinted panel.</c-ui.alert>
<c-ui.alert variant="success" appearance="solid">Solid filled panel.</c-ui.alert>
<c-ui.alert variant="success" appearance="outline">Outlined panel.</c-ui.alert>
{% cotton ui.alert variant="success" appearance="soft" %}Soft tinted panel.{% endcotton %}
{% cotton ui.alert variant="success" appearance="solid" %}Solid filled panel.{% endcotton %}
{% cotton ui.alert variant="success" appearance="outline" %}Outlined panel.{% endcotton %}

With Title

Provide a title prop to render a bold heading above the message.

<c-ui.alert variant="warning" title="Storage almost full">
    You have used 95% of your available storage. Upgrade your plan to avoid interruptions.
</c-ui.alert>
{% cotton ui.alert variant="warning" title="Storage almost full" %}
    You have used 95% of your available storage. Upgrade your plan to avoid interruptions.
{% endcotton %}

Dismissible

Add the :dismissible="True" prop to show a close button. Dismissing is handled with Alpine.js.

<c-ui.alert variant="success" title="Invitation sent" :dismissible="True">
    Your teammate will receive an email shortly.
</c-ui.alert>
{% cotton ui.alert variant="success" title="Invitation sent" :dismissible="True" %}
    Your teammate will receive an email shortly.
{% endcotton %}

Without Icon

Set :icon="False" to hide the leading icon for a more compact banner.

<c-ui.alert variant="info" :icon="False">
    This banner has no leading icon.
</c-ui.alert>
{% cotton ui.alert variant="info" :icon="False" %}
    This banner has no leading icon.
{% endcotton %}

API Reference

Props

Name Description Type Options Default
variant Contextual style that sets the tint, border, text colour and icon. str
infosuccesswarningerror
info
appearance Visual treatment, shared with toast. str
softsolidoutline
soft
title Optional bold heading shown above the message. str —
icon Whether to display the leading variant icon. bool — True
dismissible Show a close button that hides the alert. Requires Alpine.js. bool — False
class Additional classes merged onto the alert container. str —

Slots

Name Description Type Options Default
slot (default) The alert message content (text or elements). — —