Skip to contentSkip to navigationSkip to topbar
Paste assistant Assistant
Figma
Star

Badge

Version 8.2.0GithubStorybook

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

Installation

Installation page anchor
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>
);

BadgeBase

BadgeBase page anchor

variant RequiredRequired

Type
| "neutral" | "warning" | "error" | "success" | "new" | "subaccount" | "decorative10" | "decorative20" | "decorative30" | "decorative40" | "brand10" | "brand20" | "brand30" | "neutral_counter" | "error_counter" | "default" | "notification_counter" | "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" | "brand10" | "brand20" | "brand30" | "neutral_counter" | "error_counter" | "default" | "notification_counter" | "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