Badge

A small, distinct component that displays the status or classification of an item.

Import

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

Display

<Badge color="neutral" type="outline">Badge</Badge>

Allied components

Interactive

Badge

Features

Offers different types: fill and outline

Supports different sizes and shapes

Supports rightIcon, leftIcon, and onlyIcon props

Allows for customizing the badge color

Contains onDismiss and onClick props for interactivity

Implementation

Badge helps to emphasize that the item is important or has a special status.

Badge

Show Code

Types

Badge is available in two types: fill and outline. The default type is fill.

Badge

Show Code

Shape

Badge can be rounded or squared. The default shape is squared.

Badge

Show Code

Size

There are three sizes available for Badge: sm, md, lg. The default size is md.

Badge

Show Code

Responsive Sizes

Badge supports responsive sizing using breakpoint objects. This allows different sizes at different screen sizes.

Badge

Show Code

Color

Badge is available in six colors: primary, success, info, warning, critical, and neutral. The default color is neutral.

Label

Show Code

Icon

You can add an icon to the badge by using the rightIcon, leftIcon, or onlyIcon props. If you use onlyIcon, the ariaLabel prop is required for accessibility.

Badge

Show Code

Icon Only

Icon only badges are available in all sizes and can be combined with different colors and shapes.

Show Code

Interactions

Badge can be interactive by using the onDismiss and onClick props.

onDismiss: is for dismissing the badge
onClick: is for clicking the badge

If you use onDismiss, you need to pass the dismissAriaLabel prop to the badge.

Badge

Show Code

Composition

To position a Badge over another element, such as for notification bubbles or avatar statuses, utilize the Badge.Frame compound component. It is designed to allow placement at the top-end or bottom-end of the base element.

Show Code

Overlap

The overlap prop allows the badge to cover the base element, creating a more integrated appearance.

Show Code

Accessibility

Badge employs appropriate ARIA attributes to ensure accessibility.

Key	Description
⬢	ariaLabel is required for badge that has onlyIcon prop.
⬢	dismissAriaLabel is required for badge that has onDismiss prop.