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
Badge
Badge
Implementation
Badge helps to emphasize that the item is important or has a special status.
Loading...
Show Code
Types
Badge is available in two types: fill and outline. The default type is fill.
Loading...
Show Code
Shape
Badge can be rounded or squared. The default shape is squared.
Loading...
Show Code
Size
There are three sizes available for Badge: sm, md, lg. The default size is md.
Loading...
Show Code
Responsive Sizes
Badge supports responsive sizing using breakpoint objects. This allows different sizes at different screen sizes.
Loading...
Show Code
Color
Badge is available in six colors: primary, success, info, warning, critical, and neutral. The default color is neutral.
Loading...
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.
Loading...
Show Code
Icon Only
Icon only badges are available in all sizes and can be combined with different colors and shapes.
Loading...
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.
Loading...
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.
Loading...
Show Code
Overlap
The overlap prop allows the badge to cover the base element, creating a more integrated appearance.
Loading...
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. |
