Callout

Dismissable alert with variants, auto-dismiss timer, and custom icons.

<rhx-callout>

Examples

Variants

This is a neutral callout with informational content.

This is a brand callout for highlighting features.

Item saved successfully!

Please review your changes before proceeding.

An error occurred while processing your request.

<rhx-callout rhx-variant="neutral">
    This is a neutral callout with informational content.
</rhx-callout>
<rhx-callout rhx-variant="brand">
    This is a brand callout for highlighting features.
</rhx-callout>
<rhx-callout rhx-variant="success">
    Item saved successfully!
</rhx-callout>
<rhx-callout rhx-variant="warning">
    Please review your changes before proceeding.
</rhx-callout>
<rhx-callout rhx-variant="danger">
    An error occurred while processing your request.
</rhx-callout>

Closable

This callout can be dismissed by clicking the close button.

Warning: this will also close when you click the X.

<rhx-callout rhx-variant="success" rhx-closable="true">
    This callout can be dismissed by clicking the close button.
</rhx-callout>
<rhx-callout rhx-variant="warning" rhx-closable="true">
    Warning: this will also close when you click the X.
</rhx-callout>

Auto-dismiss

This callout will auto-dismiss after 5 seconds.

<rhx-callout rhx-variant="brand"
             rhx-closable="true"
             rhx-duration="5000">
    This callout will auto-dismiss after 5 seconds.
</rhx-callout>

Custom Icon

Brand callout with a check circle icon override.

<rhx-callout rhx-variant="brand"
             rhx-icon="check-circle">
    Brand callout with a check circle icon override.
</rhx-callout>

htmx Integration

Your profile has been updated successfully.

Your subscription expires in 3 days.

<div id="notif-1">
    <rhx-callout rhx-variant="success" rhx-closable="true"
                 hx-delete="/Docs/Components/Callout?handler=DismissNotification&amp;id=1"
                 hx-trigger="click from:find .rhx-callout__close"
                 hx-target="#notif-1"
                 hx-swap="outerHTML">
        Your profile has been updated successfully.
    </rhx-callout>
</div>

Properties

Property	Type	Default	Description
`rhx-variant`	`string`	`neutral`	Color variant: neutral, brand, success, warning, danger
`rhx-closable`	`bool`	`false`	Show a close/dismiss button
`rhx-duration`	`int?`	`-`	Auto-dismiss after N milliseconds
`rhx-icon`	`string`	`-`	Override the default icon for the variant
`rhx-open`	`bool`	`true`	Whether the callout is visible