1. Components
  2. Data display
  3. Badge

Badge

Displays a badge or a component that looks like a badge.

Report an issueEdit this page
Badge
<Badge>Badge</Badge>

Installation

npx dotui-cli@latest add badge

Options

Variant

Use the variant prop to control the visual style of the Badge. The default variant is primary.

NeutralOutlinePrimary
SuccessSuccess SubtleSuccess Outline
DangerDanger SubtleDanger Outline
WarningWarning SubtleWarning Outline
AccentAccent SubtleAccent Outline
<Flex>
  <Badge variant="neutral">Neutral</Badge>
  <Badge variant="outline">Outline</Badge>
  <Badge variant="primary">Primary</Badge>
</Flex>
<Flex>
  <Badge variant="success">Success</Badge>
  <Badge variant="success-subtle">Success Subtle</Badge>
  <Badge variant="success-outline">Success Outline</Badge>
</Flex>
<Flex>
  <Badge variant="danger">Danger</Badge>
  <Badge variant="danger-subtle">Danger Subtle</Badge>
  <Badge variant="danger-outline">Danger Outline</Badge>
</Flex>
<Flex>
  <Badge variant="warning">Warning</Badge>
  <Badge variant="warning-subtle">Warning Subtle</Badge>
  <Badge variant="warning-outline">Warning Outline</Badge>
</Flex>
<Flex>
  <Badge variant="accent">Accent</Badge>
  <Badge variant="accent-subtle">Accent Subtle</Badge>
  <Badge variant="accent-outline">Accent Outline</Badge>
</Flex>

Size

Use the size prop to control the size of the Badge. The default variant is sm.

SmallMediumLarge
<Badge variant="primary" size="sm">
  Small
</Badge>
<Badge variant="primary" size="md">
  Medium
</Badge>
<Badge variant="primary" size="lg">
  Large
</Badge>

Icon

To add additional context for the Badge, use the icon prop to add an icon.

BadgeBadgeBadge
<Badge icon={<ShieldIcon />} size="sm">
  Badge
</Badge>
<Badge icon={<ShieldIcon />} size="md">
  Badge
</Badge>
<Badge icon={<ShieldIcon />} size="lg">
  Badge
</Badge>

API Reference

Badge accepts all HTML span element props and the following:

PropTypeDefaultDescription
neutral
"outline" | "primary" | "success" | "success-subtle" | "success-outline" | "danger" | "danger-subtle" | "danger-outline" | "warning" | "warning-subtle" | "warning-outline" | "accent" | "accent-subtle" | "accent-outline"
"primary"
The visual style of the badge.
size
"sm" | "md" | "lg"
"sm"
The size of the badge.
icon
React.ReactNode
-
An icon to display before the badge text.

Last updated on 10/11/2024

AvatarSeparator