View Source LiveViewUI.Badge (LiveViewUI v0.0.6)
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
Attributes
cva_class
(:string
) - Defaults tonil
.variant
(:string
) - Defaults to"default"
.as
(:string
) - Defaults to"span"
.class
(:any
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)