Renders a badge with Pure Admin BEM classes.

Examples

<.badge variant="success">Active</.badge>
<.badge variant="warning" size="sm" is_pill>Pending</.badge>

Attributes

• variant (:string) - Color variant. Defaults to "primary". Must be one of "primary", "secondary", "success", "warning", "danger", "info", "light", or "dark".
• size (:string) - Defaults to nil.Must be one of nil, "xs", "sm", "lg", or "xl".
• max_width (:string) - Max width in rem units (e.g. '5', '10', '15') - adds maxwr-N text-truncate. Defaults to nil.
• is_pill (:boolean) - Rounded pill shape. Defaults to false.
• is_ellipsis_start (:boolean) - Truncate from the left side. Defaults to false.
• theme_color (:string) - Theme color 1-9. Defaults to nil. Must be one of nil, "1", "2", "3", "4", "5", "6", "7", "8", or "9".
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• icon - Icon content inside pa-badge__icon.
• inner_block (required)

Renders a container for multiple badges with optional expand/collapse.

Modes

• No limit — all badges visible (default)
• Client-side — set limit and total, JS toggles visibility without server round-trip
• Server-side — set limit, total, is_expanded, and on_toggle event name; server loads additional data on expand

Examples

<%!-- Simple group, no limit --%>
<.badge_group>
  <.badge variant="primary">Elixir</.badge>
  <.badge variant="info">Phoenix</.badge>
</.badge_group>

<%!-- Client-side expand/collapse --%>
<.badge_group limit={5} total={15}>
  <.badge :for={tag <- @tags} variant={tag.variant}><%= tag.label %></.badge>
</.badge_group>

<%!-- Server-side expand (fires phx event to load more) --%>
<.badge_group limit={5} total={@total} is_expanded={@expanded} on_toggle="expand_tags">
  <.badge :for={tag <- @tags} variant={tag.variant}><%= tag.label %></.badge>
</.badge_group>

Attributes

• limit (:integer) - Max visible badges before showing 'N more' (nil = no limit). Defaults to nil.
• total (:integer) - Total badge count (for 'N more' calculation when server hasn't sent all). Defaults to nil.
• is_expanded (:boolean) - Current expand state (server-side mode). Defaults to false.
• on_toggle (:string) - LiveView event name for expand/collapse (server-side mode). When nil, uses client-side JS. Defaults to nil.
• is_show_all (:boolean) - Show all badges (CSS class, no limit logic). Defaults to false.
• more_text (:string) - Text for 'show more' badge. {count} is replaced with hidden count. Defaults to "» {count} more".
• collapse_text (:string) - Text for 'collapse' badge. Defaults to "« Collapse".
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a three-part composite badge (icon + label + button/count).

Examples

<.composite_badge variant="primary" icon="🔔" label="Notifications" count="5" />

<.composite_badge variant="info" label="Task #1234" button_text="×" is_interactive>
  <:icon_content>📋</:icon_content>
</.composite_badge>

<.composite_badge variant="primary" label_variant="secondary" button_variant="danger"
  label="Project" button_text="×" is_interactive />

Attributes

• variant (:string) - Base color variant (icon section). Defaults to "primary". Must be one of "primary", "secondary", "success", "warning", "danger", "info", "light", or "dark".
• label_variant (:string) - Label section color (overrides variant). Defaults to nil. Must be one of nil, "primary", "secondary", "success", "warning", "danger", "info", "light", or "dark".
• button_variant (:string) - Button section color (overrides variant). Defaults to nil. Must be one of nil, "primary", "secondary", "success", "warning", "danger", "info", "light", or "dark".
• icon (:string) - Icon text or emoji. Defaults to nil.
• label (:string) (required) - Label text.
• count (:string) - Count/button text (legacy alias for button_text). Defaults to nil.
• button_text (:string) - Button section text. Defaults to nil.
• is_interactive (:boolean) - Enable hover/click styles. Defaults to false.
• on_label_click (:string) - LiveView event fired when label is clicked. Defaults to nil.
• on_button_click (:string) - LiveView event fired when button is clicked. Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["phx-click", "phx-value-id", "phx-value-label", "phx-value-action"].

Slots

• icon_content - Rich icon content (alternative to icon attr).

Renders a lightweight label indicator.

Examples

<.label variant="success">Active</.label>

Attributes

• variant (:string) - Color variant. Defaults to nil. Must be one of nil, "primary", "secondary", "success", "warning", "danger", "info", "light", or "dark".
• size (:string) - Defaults to nil.Must be one of nil, "xs", "sm", "lg", or "xl".
• is_outline (:boolean) - Outline style. Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)