Badges
is used to render one or more badges. Unlike
Tags
, badges are not linked.
Badges align start (left) by default:
<Badgesvalues={['Design Engineer', 'Recruiter', 'Teacher', 'Scientist']}m={2}/>
You can align center:
<Badgesvalues={['Design Engineer', 'Recruiter', 'Teacher', 'Scientist']}align="center"m={2}/>
Or align end (right):
<Badgesvalues={['Design Engineer', 'Recruiter', 'Teacher', 'Scientist']}align="end"m={2}/>
When you have many badges they wrap:
<Badgesvalues={['Design Engineer','Recruiter','Teacher','Environmental Specialist','Nuclear Power Engineer','Cost Accountant','VP Marketing','Automation Specialist','Analog Circuit Design Manager','Senior Cost Accountant','Desktop Support Technician','Web Developer','Technical Writer','Database Administrator','Systems Administrator','Assistant Manager',]}m={2}/>
You can still align center:
<Badgesvalues={['Design Engineer','Recruiter','Teacher','Environmental Specialist','Nuclear Power Engineer','Cost Accountant','VP Marketing','Automation Specialist','Analog Circuit Design Manager','Senior Cost Accountant','Desktop Support Technician','Web Developer','Technical Writer','Database Administrator','Systems Administrator','Assistant Manager',]}align="center"m={2}/>
Or align end:
<Badgesvalues={['Design Engineer','Recruiter','Teacher','Environmental Specialist','Nuclear Power Engineer','Cost Accountant','VP Marketing','Automation Specialist','Analog Circuit Design Manager','Senior Cost Accountant','Desktop Support Technician','Web Developer','Technical Writer','Database Administrator','Systems Administrator','Assistant Manager',]}align="end"m={2}/>
You can adjust the gap:
<Badgesvalues={['Design Engineer','Recruiter','Teacher','Environmental Specialist','Nuclear Power Engineer','Cost Accountant','VP Marketing','Automation Specialist','Analog Circuit Design Manager','Senior Cost Accountant','Desktop Support Technician','Web Developer','Technical Writer','Database Administrator','Systems Administrator','Assistant Manager',]}gap={1}m={2}/>
Badges
supports space props and
color props from
Styled System.
Name | Type | Default | Required | Description |
---|---|---|---|---|
values | Array of string | ✓ | Array of badge names. | |
gap | Number | 2 | Gap between badges (from space scale). | |
align | start , center or end | start | Alignment (responsive). | |
variant | String | badges.primary | Optional variant for customizations. |
If you do not provide a variant
prop, badges are rendered with the defaults
from Theme UI's
Badge
.
Its variants are defined under the badges
key, as explained in the
docs.
If you define customizations for Theme Ui's Badge
, you can make Badges
use
these custmoizations by providing the corresponding variant to the variant
prop. You can also define you own variants under any other key and provide that
key to variant
.
In this example we customize the corners of the badges using default variant
badges.primary
:
<ThemeProvidertheme={{badges: {default: {borderRadius: 0,},primary: {variant: 'badges.default',},},}}><Badgesvalues={['Design Engineer', 'Recruiter', 'Teacher', 'Scientist']}m={2}/></ThemeProvider>
In this example we define variant badges.secondary
and apply it to Badges
:
<ThemeProvidertheme={{badges: {secondary: {color: 'background',bg: 'secondary',},},}}><Badgesvalues={['Design Engineer', 'Recruiter', 'Teacher', 'Scientist']}variant="badges.secondary"m={2}/></ThemeProvider>
The following URLs can be used for visual regression testing: