Writing contentComponents

Badge

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
1### Plant Care API <Badge intent="info">v2.1.0</Badge> <Badge intent="launch" minimal>New</Badge>

Variants

Intents

SuccessNoteTipWarningErrorInfoLaunchCheck
Markdown
1<Badge intent="success">Success</Badge>
2<Badge intent="note">Note</Badge>
3<Badge intent="tip">Tip</Badge>
4<Badge intent="warning">Warning</Badge>
5<Badge intent="error">Error</Badge>
6<Badge intent="info">Info</Badge>
7<Badge intent="launch">Launch</Badge>
8<Badge intent="check">Check</Badge>

Styles

Success badge, minimal styleError badge, minimal styleSuccess badge, outlined styleError badge, outlined and minimal style
Markdown
1<Badge intent="success" minimal>Success badge, minimal style</Badge>
2<Badge intent="error" minimal>Error badge, minimal style</Badge>
3<Badge intent="success" outlined>Success badge, outlined style</Badge>
4<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.