Skip to content
Paste
UX Platform
Change the site theme
GitHub

Badge

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

Code ready:
Code done
Design assets:Pending
Documentation:
Documentation done
Peer review:Pending
Status
Production
Version
1.0.1
Sources
Storybook
Import from
@twilio-paste/core/badge — or — @twilio-paste/badge

Guidelines#

About Badge#

A Badge can be used to label a piece of UI for quick identification and navigation. It can be used in a wide variety of situations such as labelling Beta product features or a state, for example a status.

A Badge should contain text content and can optionally contain smaller graphical elements such as Icons and Avatars. Text length should be kept short.

Examples#

Default Badge#

DefaultDefaultDefault

Info Badge#

InfoInfoInfo

Warning Badge#

WarningWarningWarning

Error Badge#

ErrorErrorError

Success Badge#

SuccessSuccessSuccess

New Badge#

NewNewNew

Badge with anchor functionality#

A badge can link to other pages. When doing so, add an href ref to the Badge and set the rendered element to an anchor with as=”a”.

DefaultInfoWarningErrorSuccessNew

Badge with button functionality#

A Badge can also be used to trigger an action, such as showing a Popover or Modal Dialog. To do so, provide an onClick event handler and set the rendered element to a button with as=”button”.

When to use a Badge#

Use a Badge when you want to add a label to a piece of UI for quick identification and navigation.

Use cases#

Call attention to attributes of table items#

Call SIDDirectionDate
CA0yc4mxi6cn4z13bte7qmflc2drc85mlpInbound2020-09-17, 16:24:28 PDT
CA0yc4mxi6cn4z13bte7qmflc2drc85mlpOutbound2020-09-17, 16:24:28 PDT
CA0yc4mxi6cn4z13bte7qmflc2drc85mlpOutbound2020-09-17, 16:24:28 PDT
CA0yc4mxi6cn4z13bte7qmflc2drc85mlpInbound2020-09-17, 16:24:28 PDT

Identify an item as as a beta release#

Emergency Calling

Beta

Twilio’s Emergency Calling for SIP Trunking feature enables emergency call routing to Public Safety Answering Points (PSAPs) in the US, Canada, and the UK.

Highlight products#

Would you like to enable call recording?
Applies to all incoming and outbound calls.
SIP TrunkingVoice

Do & Don't#

New Badge componentNew Component
Do

Use 1-3 words as Badge text.

This is some very long text inside a Badge that creates a very large Badge.
Don't

Don't use lengthy copy inside a Badge.

Inline Badge
Do

Set the Badge children to be inline.

This
is
not ideal
Don't

Don't use multiline Badge text.


Usage Guide#

API#

Installation#

yarn add @twilio-paste/badge - or - yarn add @twilio-paste/core

Usage#

import {Badge} from '@twilio-paste/badge';
const BadgeExample = () => (
<Badge variant="default" as="span">
Default Badge
</Badge>
);

Props#

PropTypeDescriptionDefault
childrenBadgeChildrennull
variantBadgeVariantsdefault, info, success, warning, error, newnull
asBadgeBaseElementsThe HTML tag to use as base. -span, button, anull
href?stringA URL to route to. Must use as="a" for this prop to work.undefined
onClick?MouseEventHandler<HTMLButtonElement>React event handler. Must use as="button" for this prop to work.undefined

Black lives matter.