Badge

A small visual indicator component used to highlight status, display counts or draw attention to specific elements. Supports different colors and sizes to convey various types of information.

Multiple color variants for different states

Flexible sizing options

Consistent visual styling

Architecture

so-badge
Slot: default

Reference

  • Badge

    The badge component. Handles the styling and layout based on the provided color and size properties.

    • Attributes

      • color
        enum
        /
        default: brand

        Sets the badge's color scheme, with options like brand for primary actions, neutral for default states and semantic colors for outcomes such as success, warning or critical alerts.

      • size
        enum
        /
        default: md

        Controls the size of the badge. The default size is md.

    • Classes

      • lg

        Applied when the size lg is selected.

      • sm

        Applied when the size sm is selected.

made for toddle