Badge

Display

A small label for status, counts, or categories.

Playground

New

Controls

Variant

Color variant.

Size

Size.

Rounded

Pill shape.

Prop	Type	Default	Description
`variant`	`'default' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'outline'`	`'default'`	Color variant.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size.
`rounded`	`boolean`	`false`	Pill shape.

Default

vue

<DsBadge variant="default">
  Default
</DsBadge>

Primary

vue

<DsBadge variant="primary">
  Primary
</DsBadge>

Success

Active

vue

<DsBadge variant="success">
  Active
</DsBadge>

Warning

Pending

vue

<DsBadge variant="warning">
  Pending
</DsBadge>

Danger

Error

vue

<DsBadge variant="danger">
  Error
</DsBadge>

Outline

vue

<DsBadge variant="outline">
  Outline
</DsBadge>

Rounded

vue

<DsBadge rounded>
  Rounded
</DsBadge>

Use DsBadgeSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsBadgeSkeleton />

Small

vue

<DsBadgeSkeleton size="sm" />

Large

vue

<DsBadgeSkeleton size="lg" />

AlertDialog

Progress