Badge

Examples
Info Badge
Theme: seekAnz
Info
Theme: seekBusiness
Info
Theme: jobsDbRebrand
Info
Theme: jobsDb
Info
Theme: jobStreet
Info
Theme: jobStreetClassic
Info
Theme: wireframe
Info
Code:
<Badge tone="info">Info</Badge>
Strong Info Badge
Theme: seekAnz
Info
Theme: seekBusiness
Info
Theme: jobsDbRebrand
Info
Theme: jobsDb
Info
Theme: jobStreet
Info
Theme: jobStreetClassic
Info
Theme: wireframe
Info
Code:
<Badge tone="info" weight="strong">
  Info
</Badge>
Critical Badge
Theme: seekAnz
Critical
Theme: seekBusiness
Critical
Theme: jobsDbRebrand
Critical
Theme: jobsDb
Critical
Theme: jobStreet
Critical
Theme: jobStreetClassic
Critical
Theme: wireframe
Critical
Code:
<Badge tone="critical">Critical</Badge>
Strong Critical Badge
Theme: seekAnz
Critical
Theme: seekBusiness
Critical
Theme: jobsDbRebrand
Critical
Theme: jobsDb
Critical
Theme: jobStreet
Critical
Theme: jobStreetClassic
Critical
Theme: wireframe
Critical
Code:
<Badge tone="critical" weight="strong">
  Critical
</Badge>
Positive Badge
Theme: seekAnz
Positive
Theme: seekBusiness
Positive
Theme: jobsDbRebrand
Positive
Theme: jobsDb
Positive
Theme: jobStreet
Positive
Theme: jobStreetClassic
Positive
Theme: wireframe
Positive
Code:
<Badge tone="positive">Positive</Badge>
Strong Positive Badge
Theme: seekAnz
Positive
Theme: seekBusiness
Positive
Theme: jobsDbRebrand
Positive
Theme: jobsDb
Positive
Theme: jobStreet
Positive
Theme: jobStreetClassic
Positive
Theme: wireframe
Positive
Code:
<Badge tone="positive" weight="strong">
  Positive
</Badge>
Promote Badge
Theme: seekAnz
Promote
Theme: seekBusiness
Promote
Theme: jobsDbRebrand
Promote
Theme: jobsDb
Promote
Theme: jobStreet
Promote
Theme: jobStreetClassic
Promote
Theme: wireframe
Promote
Code:
<Badge tone="promote">Promote</Badge>
Strong Promote Badge
Theme: seekAnz
Promote
Theme: seekBusiness
Promote
Theme: jobsDbRebrand
Promote
Theme: jobsDb
Promote
Theme: jobStreet
Promote
Theme: jobStreetClassic
Promote
Theme: wireframe
Promote
Code:
<Badge tone="promote" weight="strong">
  Promote
</Badge>
Neutral Badge
Theme: seekAnz
Neutral
Theme: seekBusiness
Neutral
Theme: jobsDbRebrand
Neutral
Theme: jobsDb
Neutral
Theme: jobStreet
Neutral
Theme: jobStreetClassic
Neutral
Theme: wireframe
Neutral
Code:
<Badge tone="neutral">Neutral</Badge>
Strong Neutral Badge
Theme: seekAnz
Neutral
Theme: seekBusiness
Neutral
Theme: jobsDbRebrand
Neutral
Theme: jobsDb
Neutral
Theme: jobStreet
Neutral
Theme: jobStreetClassic
Neutral
Theme: wireframe
Neutral
Code:
<Badge tone="neutral" weight="strong">
  Neutral
</Badge>

Required props

children
string

Optional props

tone
"info" | "promote" | "critical" | "positive" | "neutral"
weight
"regular" | "strong"
id
string

Further References