Skip to content

Badges

Experimental

Badges is used to render one or more badges. Unlike Tags, badges are not linked.

Examples

Badges align start (left) by default:

Design Engineer
Recruiter
Teacher
Scientist

You can align center:

Design Engineer
Recruiter
Teacher
Scientist

Or align end (right):

Design Engineer
Recruiter
Teacher
Scientist

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

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

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

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

System props

Badges supports space props and color props from Styled System.

Component props

NameTypeDefaultRequiredDescription
valuesArray of stringArray of badge names.
gapNumber2Gap between badges (from space scale).
alignstart, center or endstartAlignment (responsive).
variantStringbadges.primaryOptional variant for customizations.

Variants

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:

Design Engineer
Recruiter
Teacher
Scientist

In this example we define variant badges.secondary and apply it to Badges:

Design Engineer
Recruiter
Teacher
Scientist

Visual regression testing

The following URLs can be used for visual regression testing: