SutraUI.Badge (Sutra UI v0.3.0)

View Source

A small status indicator component.

Badges are used to display counts, labels, or status indicators. They can be rendered as <span> or <a> elements.

Variants

  • default - Default badge style
  • secondary - Muted secondary style
  • destructive - Error/danger style
  • success - Success/positive style
  • outline - Border only, transparent background

Examples

# Basic badge
<.badge>New</.badge>

# Variants
<.badge variant="secondary">Draft</.badge>
<.badge variant="destructive">Error</.badge>
<.badge variant="outline">Pending</.badge>

# As a link
<.badge href="/notifications">5 new</.badge>

# With icon
<.badge>
  <!-- Your icon here -->
  Verified
</.badge>

Summary

Functions

badge(assigns)

Renders a badge component.

Functions

badge(assigns)

Renders a badge component.

Attributes

  • variant - Visual style. One of default, secondary, destructive, outline. Defaults to default.
  • href - Optional link URL. Renders as <a> instead of <span>.
  • class - Additional CSS classes.

Slots

  • inner_block - Required. The badge content.

Attributes

  • variant (:string) - Visual style variant. Defaults to "default". Must be one of "default", "secondary", "destructive", "success", or "outline".
  • href (:string) - Optional link URL. Defaults to nil.
  • class (:any) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["id", "role", "aria-label"].

Slots

  • inner_block (required) - Badge content.