Callout

A component used to highlight important information, messages or announcements. Supports different color variants to convey various levels of importance or types of information.

Multiple color variants for different message types

Optional icon support for enhanced visual communication

Architecture

so-callout
Slot: default
so-callout-icon
Slot: default Place an icon here.
so-callout-text
Slot: default

Reference

  • Callout

    The root container that manages the visual presentation and layout of the callout. Coordinates the arrangement of the icon and text components.

    • Attributes

      • color
        enum
        /
        default: brand

        Sets the callout's color scheme, with options like brand for primary messaging, neutral for default information and semantic colors for different message types such as success, warning, or critical alerts.

  • Icon

    The container for an optional icon that visually reinforces the callout's message or purpose. The icon's appearance automatically adapts to match the selected color variant.

  • Text

    The container for the callout's textual content. Provides proper spacing and alignment with the optional icon component.

made for toddle