Figma
Star462

Badge

A Badge is a visual text label that describes an attribute of an object.

yarn add @twilio-paste/badge - or - yarn add @twilio-paste/core
import {Badge} from '@twilio-paste/core/badge';

const BadgeExample = () => (
  <Badge as="span" variant="neutral">
    Default Badge
  </Badge>
);

variant RequiredRequired

Type
| "neutral" | "warning" | "error" | "success" | "new" | "subaccount" | "decorative10" | "decorative20" | "decorative30" | "decorative40" | "neutral_counter" | "error_counter" | "default" | "info"
Default
null

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
BADGE

size

Type
BadgeSizes
Default
default

as RequiredRequired

Underlying HTML element to render. Can be "span", "button", or "a".

Type
"span" | "a" | "button"
Default
null

variant RequiredRequired

Type
| "neutral" | "warning" | "error" | "success" | "new" | "subaccount" | "decorative10" | "decorative20" | "decorative30" | "decorative40" | "neutral_counter" | "error_counter" | "default" | "info"
Default
null

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
BADGE

href

Type
string

size

Type
BadgeSizes
Default
default

as RequiredRequired

Underlying HTML element to render. Can be "span", "button", or "a".

Type
"button"
Default
null

href

Type
never

as RequiredRequired

Underlying HTML element to render. Can be "span", "button", or "a".

Type
"span"
Default
null

href

Type
never

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.