Badge

display

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

Preview

Default

Secondary

Destructive

Outline

Installation

npm install @launchapp/design-system

Import

import { Badge } from "@launchapp/design-system";

Examples

All Variants

<div className="flex gap-2">  <Badge>Default</Badge>  <Badge variant="secondary">Secondary</Badge>  <Badge variant="destructive">Destructive</Badge>  <Badge variant="outline">Outline</Badge></div>

Props

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "destructive" \| "outline"`	`"default"`	The visual style of the badge.
`className`	`string`	—	Additional CSS classes.

← PreviousAvatar

Next →Breadcrumb