Skip to main content

Badge

Badge is a compact label that marks an item with a status or count, such as a shipped order or unread messages.

Import

import { Badge } from '@vortexlabs/vortex';
import type { BadgeProps } from '@vortexlabs/vortex';

Allied components

Interactive

Other links

Storybook

Badge

<Badge
  variant="solid"
  tone="neutral"
  size="md"
  rounded={false}
>
  Badge
</Badge>

Features

  • Supports solid and outline variants.
  • Supports semantic tones and responsive sizes.
  • Can contain text, startIcon, endIcon, or onlyIcon.
  • Supports onClick, href, and close actions.
  • Can be positioned with Badge.Frame.

Variants

Badge has two visual styles: solid and outline. The default variant is solid.

Solid

Outline

<Badge variant="solid">Solid</Badge>
<Badge variant="outline">Outline</Badge>

Tone

Use tone to match the badge to the surrounding UI state or emphasis.

Neutral

Primary

Info

Success

Warning

Critical

Neutral

Primary

Info

Success

Warning

Critical

<Badge tone="neutral">Neutral</Badge>
<Badge tone="primary">Primary</Badge>
<Badge tone="info">Info</Badge>
<Badge tone="success">Success</Badge>
<Badge tone="warning">Warning</Badge>
<Badge tone="critical">Critical</Badge>

<Badge tone="neutral" variant="outline">Neutral</Badge>
<Badge tone="primary" variant="outline">Primary</Badge>
<Badge tone="info" variant="outline">Info</Badge>
<Badge tone="success" variant="outline">Success</Badge>
<Badge tone="warning" variant="outline">Warning</Badge>
<Badge tone="critical" variant="outline">Critical</Badge>

Sizes

Badge is available in three sizes: sm, md, and lg. The default size is md.

Small

Medium

Large

<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>

Badge can adapt its size responsively according to the breakpoint.

Responsive

<Badge size={{ xs: "sm", sm: "md", lg: "lg" }}>
    Responsive
</Badge>

Icons

Badges can contain startIcon, endIcon, or onlyIcon. If you use onlyIcon, provide an ariaLabel prop.

Start icon

End icon

<Badge startIcon={ArrowUp}>Start icon</Badge>
<Badge endIcon={ChevronRight}>End icon</Badge>
<Badge onlyIcon={ChevronRight} ariaLabel="Next step" />

Shape

Badge is square by default. Use rounded to render a pill-shaped badge.

Square

Rounded

Rounded

<Badge>Square</Badge>
<Badge rounded>Rounded</Badge>
<Badge rounded variant="outline">Rounded</Badge>

Interactive

Badge can be used as an action with onClick or as a link with href.

Link badge

<Badge onClick={() => {}}>Action badge</Badge>
<Badge href={vortexUrl}>Link badge</Badge>

Close Action

Use onClose to add a close control. When onClose is provided, closeAriaLabel is required. Icon-only badges do not support a close control.

Closable

With icon

<Badge onClose={() => {}} closeAriaLabel="Remove badge">
    Closable
</Badge>

<Badge startIcon={ArrowUp} onClose={() => {}} closeAriaLabel="Remove badge">
    With icon
</Badge>

Frame

Use Badge.Frame to position a badge relative to another element. It supports top-end and bottom-end positions, and can overlap the framed content.

2

2

<Badge.Frame>
    <Badge tone="primary">2</Badge>
    <Placeholder width={10} height={10} borderRadius="full" />
</Badge.Frame>

<Badge.Frame position="bottom-end" overlap>
    <Badge size="sm" tone="primary" rounded>2</Badge>
    <Placeholder width={10} height={10} borderRadius="full" />
</Badge.Frame>

Accessibility

Badge uses Interactive for actionable and linked states, and requires labels for icon-only and close controls.

Description
Use ariaLabel when onlyIcon is provided so the badge has an accessible name.
Use closeAriaLabel when onClose is provided so the close control can be announced.
Use href for navigation and onClick for action badges.
hidden visually hides the badge and removes its text from the accessibility tree.