Skip to navigation
Writing contentComponents

Badge

View as Markdown

Use the <Badge> component to display small pieces of information, such as status indicators, categories, versions, or release dates. To display longer notes, use callouts.

Usage

Plant Care API v2.1.0 New

Markdown
### Plant Care API <Badge intent="info">v2.1.0</Badge> <Badge intent="launch" minimal>New</Badge>

Variants

Intents

SuccessNoteTipWarningErrorInfoLaunchCheck
Markdown
<Badge intent="success">Success</Badge>
<Badge intent="note">Note</Badge>
<Badge intent="tip">Tip</Badge>
<Badge intent="warning">Warning</Badge>
<Badge intent="error">Error</Badge>
<Badge intent="info">Info</Badge>
<Badge intent="launch">Launch</Badge>
<Badge intent="check">Check</Badge>

Styles

Success badge, minimal styleError badge, minimal styleSuccess badge, outlined styleError badge, outlined and minimal style
Markdown
<Badge intent="success" minimal>Success badge, minimal style</Badge>
<Badge intent="error" minimal>Error badge, minimal style</Badge>
<Badge intent="success" outlined>Success badge, outlined style</Badge>
<Badge intent="error" minimal outlined>Error badge, outlined and minimal style</Badge>

Properties

intent
stringRequired

The semantic color of the badge. Available options: success, note, tip, warning, error, info, launch, check

minimal
booleanDefaults to false

Displays the badge with a more subtle background style. Can be combined with outlined.

outlined
booleanDefaults to false

Displays the badge with an outlined border style. Can be combined with minimal.