Renders a badge component.

Examples

<Badge.badge>New</Badge.badge>
<Badge.badge size="2" variant="solid" color="blue">Updated</Badge.badge>
<Badge.badge variant="outline" high_contrast>Important</Badge.badge>

Props

• size - Badge size: "1", "2", "3" (default: "1")
• variant - Badge variant: "solid", "soft", "surface", "outline" (default: "soft")
• color - Color theme (default: accent color)
• high_contrast - Enable high contrast mode (default: false)
• radius - Border radius: "none", "small", "medium", "large", "full" (default: follows theme)
• Plus margin props (m, mx, my, mt, mr, mb, ml) and as_child functionality

Attributes

• color (:string) - Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. Must be one of "gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", or "sky".
• high_contrast (:boolean) - Whether to increase color contrast with the background.
• m (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mx (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• my (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mt (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mr (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mb (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• ml (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• as_child (:boolean) - Composes the component into its immediate child instead of rendering its own HTML element. Defaults to false.
• radius (:string) - Border radius utility. Accepts: none, small, medium, large, full. Responsive supported. Must be one of "none", "small", "medium", "large", or "full".
• size (:string) - Badge size. Defaults to "1". Must be one of "1", "2", or "3".
• variant (:string) - Badge variant. Defaults to "soft". Must be one of "solid", "soft", "surface", or "outline".
• class (:string) - Additional CSS classes. Defaults to nil.
• style (:string) - Additional inline styles. Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)