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

Anatomy

import { Badge } from "@/components/core/badge";
 
<Badge>Badge</Badge>;

Options

Variant

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

neutralaccentsuccessdangerwarninginfo
<Badge variant="neutral">neutral</Badge>
<Badge variant="accent">accent</Badge>
<Badge variant="success">success</Badge>
<Badge variant="danger">danger</Badge>
<Badge variant="warning">warning</Badge>
<Badge variant="info">info</Badge>

Size

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

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

Examples

With icon

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

API Reference

Badge accepts all HTML span element props and the following:

PropTypeDefaultDescription
neutral'neutral' | 'accent' | 'success' | 'warning' | 'info' | 'danger'The visual style of the badge.
size'sm' | 'md' | 'lg'"sm"The size of the badge.

Last updated on 10/11/2024

AvatarSeparator
dotUI

Bringing singularity to the web.

Community

Built by mehdibha. The source code is available on GitHub.