Docs

Cinder UI

GitHub Hex
Original shadcn/ui docs ↗

Feedback.badge

Server-rendered

Renders a status badge.

Colors

:primary, :secondary, :destructive, :success, :warning, :info

Default badge

New 
  <.badge>New</.badge>

All colors and variants

Primary

Solid Outline Ghost Link

Secondary

Solid Outline Ghost Link

Destructive

Solid Outline Ghost Link

Success

Solid Outline Ghost Link

Warning

Solid Outline Ghost Link

Info

Solid Outline Ghost Link 
  <div class="space-y-6">
  <div class="space-y-2">
    <h4 class="text-sm font-medium text-muted-foreground">Primary</h4>
    <div class="flex gap-2 flex-wrap">
      <.badge color={:primary} variant={:solid}>Solid</.badge>
      <.badge color={:primary} variant={:outline}>Outline</.badge>
      <.badge color={:primary} variant={:ghost}>Ghost</.badge>
      <.badge color={:primary} variant={:link}>Link</.badge>
    </div>
  </div>

  <div class="space-y-2">
    <h4 class="text-sm font-medium text-muted-foreground">Secondary</h4>
    <div class="flex gap-2 flex-wrap">
      <.badge color={:secondary} variant={:solid}>Solid</.badge>
      <.badge color={:secondary} variant={:outline}>Outline</.badge>
      <.badge color={:secondary} variant={:ghost}>Ghost</.badge>
      <.badge color={:secondary} variant={:link}>Link</.badge>
    </div>
  </div>

  <div class="space-y-2">
    <h4 class="text-sm font-medium text-muted-foreground">Destructive</h4>
    <div class="flex gap-2 flex-wrap">
      <.badge color={:destructive} variant={:solid}>Solid</.badge>
      <.badge color={:destructive} variant={:outline}>Outline</.badge>
      <.badge color={:destructive} variant={:ghost}>Ghost</.badge>
      <.badge color={:destructive} variant={:link}>Link</.badge>
    </div>
  </div>

  <div class="space-y-2">
    <h4 class="text-sm font-medium text-muted-foreground">Success</h4>
    <div class="flex gap-2 flex-wrap">
      <.badge color={:success} variant={:solid}>Solid</.badge>
      <.badge color={:success} variant={:outline}>Outline</.badge>
      <.badge color={:success} variant={:ghost}>Ghost</.badge>
      <.badge color={:success} variant={:link}>Link</.badge>
    </div>
  </div>

  <div class="space-y-2">
    <h4 class="text-sm font-medium text-muted-foreground">Warning</h4>
    <div class="flex gap-2 flex-wrap">
      <.badge color={:warning} variant={:solid}>Solid</.badge>
      <.badge color={:warning} variant={:outline}>Outline</.badge>
      <.badge color={:warning} variant={:ghost}>Ghost</.badge>
      <.badge color={:warning} variant={:link}>Link</.badge>
    </div>
  </div>

  <div class="space-y-2">
    <h4 class="text-sm font-medium text-muted-foreground">Info</h4>
    <div class="flex gap-2 flex-wrap">
      <.badge color={:info} variant={:solid}>Solid</.badge>
      <.badge color={:info} variant={:outline}>Outline</.badge>
      <.badge color={:info} variant={:ghost}>Ghost</.badge>
      <.badge color={:info} variant={:link}>Link</.badge>
    </div>
  </div>
</div>

Badge with icon

Verified 
  <.badge color={:secondary}>
  <.icon name="check" />
  Verified
</.badge>

Attributes

Name Type Default Values Global Includes
class :string — — —
color :atom :primary :primary , :secondary , :destructive , :success , :warning , :info —
rest :global — — —
variant :atom :solid :solid , :outline , :ghost , :link —

Slots

Slot Slot Attributes
inner_block Required —