Code

Usage

import { Badge } from "@twilio-labs/match/components";
const Component = () => <Badge>Ahoy!</Badge>;

Guidelines

Use

Badges should be used to display small tidbits of information such as numbers or small tags and not used for long phrases or statements. Example uses include things like number of notifications, descriptors like (alpha, beta, etc.).

Accessibility

Badges are usually aligned at the top of a content section. They provide a small visual indicator that is usually used to compare against other sections.

Badges will be read by screen readers.


Examples

Primary

The primary link is the most common variation and can be used on any light background.