View Source LiveViewUI.UI.Badge (LiveViewUI v0.0.7)

A simple badge component for displaying small labels or tags.

Example Usage

Here is a basic example of setting up a badge component:

<Badge.root>
  Default Badge
</Badge.root>

You can customize the badge with different variants and HTML elements:

<Badge.root variant="secondary" as="div" class="extra-class">
  Secondary Badge
</Badge.root>

Attributes

  • :variant - The style variant of the badge. Available options:
    • :default (default)
    • :secondary
    • :destructive
    • :outline
  • :as - The HTML element to use for the badge. Default is "span", can be "div".
  • :class - Additional CSS classes to apply to the badge.
  • :rest - Any additional attributes to apply to the badge's root element.

Slots

  • :inner_block - The content to be displayed inside the badge.

Summary

Functions

root(assigns)

Attributes

  • cva_class (:string) - Defaults to nil.
  • variant (:string) - Defaults to "default".
  • as (:string) - Defaults to "span".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Functions

Link to this function

root(assigns)

View Source

Attributes

  • cva_class (:string) - Defaults to nil.
  • variant (:string) - Defaults to "default".
  • as (:string) - Defaults to "span".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)