Badges is used to render one or more badges. Unlike
Tags
Badges align start (left) by default:
Design Engineer
Recruiter
Teacher
Scientist
< Badges
values = { [ 'Design Engineer' , 'Recruiter' , 'Teacher' , 'Scientist' ] }
m = { 2 }
/>
You can align center:
Design Engineer
Recruiter
Teacher
Scientist
< Badges
values = { [ 'Design Engineer' , 'Recruiter' , 'Teacher' , 'Scientist' ] }
align = " center "
m = { 2 }
/>
Or align end (right):
Design Engineer
Recruiter
Teacher
Scientist
< Badges
values = { [ 'Design Engineer' , 'Recruiter' , 'Teacher' , 'Scientist' ] }
align = " end "
m = { 2 }
/>
When you have many badges they wrap:
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
< Badges
values = { [
'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:
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
< Badges
values = { [
'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:
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
< Badges
values = { [
'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:
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
< Badges
values = { [
'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 endstartAlignment (responsive). variant String badges.primaryOptional variant for customizations.
If you do not provide a variant prop, badges are rendered with the defaults
from Theme UI's
Badgebadges 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:
Design Engineer
Recruiter
Teacher
Scientist
< ThemeProvider
theme = { {
badges : {
default : {
borderRadius : 0 ,
} ,
primary : {
variant : 'badges.default' ,
} ,
} ,
} }
>
< Badges
values = { [ 'Design Engineer' , 'Recruiter' , 'Teacher' , 'Scientist' ] }
m = { 2 }
/>
</ ThemeProvider >
In this example we define variant badges.secondary and apply it to Badges:
Design Engineer
Recruiter
Teacher
Scientist
< ThemeProvider
theme = { {
badges : {
secondary : {
color : 'background' ,
bg : 'secondary' ,
} ,
} ,
} }
>
< Badges
values = { [ 'Design Engineer' , 'Recruiter' , 'Teacher' , 'Scientist' ] }
variant = " badges.secondary "
m = { 2 }
/>
</ ThemeProvider >
The following URLs can be used for visual regression testing:
