Catalog Badges

<.badge>

ConnieUI.Badges

Pending
HEEx 
<ConnieUI.Badges.badge>Pending</ConnieUI.Badges.badge>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

:string
:string
:string
:string
:string
:string
:string
:string

read after the badge's contents by a screen reader, and never shown. For a badge that says what it means only in context: a bare count beside a label reads as "Chat 3" without one. A badge is a `span`, which ARIA forbids naming, so this cannot be an `aria-label`.

Set by the example

class

Docs

Renders a pill-style badge component. ## Examples <.badge>Default badge</.badge> <.badge color="error" size="lg">Error badge</.badge> <.badge color="success">Success badge</.badge> <.badge icon_start="icon-dot" color="success">Online</.badge> <.badge icon_start="hero-check-solid" color="success">Verified</.badge> <.badge icon_end="hero-x-mark-solid" color="error">Remove</.badge> <.badge flag="US" color="brand">United States</.badge> <.badge color="brand" size="sm" sr_suffix="unread">3</.badge>
Attribute Type Default Description
size :string "md"
sm | md | lg
color :string "gray"
gray | dark | brand | error | warning | yellow | success | blue | indigo | purple | pink | orange | nil
icon_start :string nil
icon_end :string nil
flag :string nil
class :any nil
icon_start_class :string nil
icon_end_class :string nil
sr_suffix :string nil
read after the badge's contents by a screen reader, and never shown. For a badge that says what it means only in context: a bare count beside a label reads as "Chat 3" without one. A badge is a `span`, which ARIA forbids naming, so this cannot be an `aria-label`.
Slot Slot attributes Description
inner_block *