Skip to content
Paramanu v0.1.0-alpha.0

Badge

Badge is a small inline label used to display status, counts, or categories. Supports filled, outline, and subtle variants with multiple color palettes.

Basic Usage

New
import { Badge } from "@paramanu/data-display-react"


export default function App() {
return <Badge>New</Badge>
}
<span class="pm-badge pm-badge--filled pm-badge--md pm-badge--primary">New</span>

Variants

Filled Outline Subtle
import { Badge } from "@paramanu/data-display-react"


export default function App() {
return (
  <>
    <Badge variant="filled">Filled</Badge>
    <Badge variant="outline">Outline</Badge>
    <Badge variant="subtle">Subtle</Badge>
  </>
)
}
<span class="pm-badge pm-badge--filled pm-badge--md pm-badge--primary">Filled</span>
<span class="pm-badge pm-badge--outline pm-badge--md pm-badge--primary">Outline</span>
<span class="pm-badge pm-badge--subtle pm-badge--md pm-badge--primary">Subtle</span>

Colors

Primary Success Danger Neutral
import { Badge } from "@paramanu/data-display-react"


export default function App() {
return (
  <>
    <Badge color="primary">Primary</Badge>
    <Badge color="success">Success</Badge>
    <Badge color="danger">Danger</Badge>
    <Badge color="neutral">Neutral</Badge>
  </>
)
}
<span class="pm-badge pm-badge--filled pm-badge--md pm-badge--primary">Primary</span>
<span class="pm-badge pm-badge--filled pm-badge--md pm-badge--success">Success</span>
<span class="pm-badge pm-badge--filled pm-badge--md pm-badge--danger">Danger</span>
<span class="pm-badge pm-badge--filled pm-badge--md pm-badge--neutral">Neutral</span>