Skip to main content

Badge

Badges are compact labels used to communicate status, metadata, counts, or short actions.

Import

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

Display

<Badge>Badge</Badge>

Allied components

AvatarInteractive

Other links

Storybook

Badge

<Badge
  type="fill"
  color="neutral"
  size="md"
  rounded={false}
>
  Badge
</Badge>

Features

  • Supports fill and outline types.
  • Supports semantic colors and responsive sizes.
  • Can contain text, leftIcon, rightIcon, or onlyIcon.
  • Supports onClick, href, and close actions.
  • Can be positioned with Badge.Frame.

Type

Badge has two visual styles: fill and outline. The default type is fill.

Fill

Outline

<Badge type="fill">Fill</Badge>
<Badge type="outline">Outline</Badge>

Color

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

Neutral

Primary

Info

Success

Warning

Critical

Neutral

Primary

Info

Success

Warning

Critical

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

<Badge color="neutral" type="outline">Neutral</Badge>
<Badge color="primary" type="outline">Primary</Badge>
<Badge color="info" type="outline">Info</Badge>
<Badge color="success" type="outline">Success</Badge>
<Badge color="warning" type="outline">Warning</Badge>
<Badge color="critical" type="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 leftIcon, rightIcon, or onlyIcon. If you use onlyIcon, provide an ariaLabel prop.

Left icon

Right icon

<Badge leftIcon={ArrowUp}>Left icon</Badge>
<Badge rightIcon={ChevronRight}>Right 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 type="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.

Closable

With icon

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

<Badge leftIcon={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 color="primary">2</Badge>
  <Placeholder width={10} height={10} borderRadius="full" />
</Badge.Frame>

<Badge.Frame position="bottom-end" overlap>
  <Badge size="sm" color="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.