Badge

import Badge from 'frui/Badge';

Copy

Props

Name	Type	Required	Notes
className	string	No	Standard HTML class names
color	string	No	Custom CSS hex or name
curved	boolean	No	Slight curved corners
error	boolean	No	Red badge
info	boolean	No	Blue badge
muted	boolean	No	Gray badge
outline	boolean	No	Border and text with color
pill	boolean	No	Max rounded corners
rounded	boolean	No	Rounded corners
solid	boolean	No	Fills badge with color
style	CSS Object	No	Standard CSS input
success	boolean	No	Green badge
warning	boolean	No	Orange badge

Badges have the following types: info, warning, success, error, and muted.

123

<Badge info className="text-xs">123</Badge>

Copy

234

<Badge warning className="text-xs">234</Badge>

Copy

345

<Badge success className="text-xs">345</Badge>

Copy

456

<Badge error className="text-xs">456</Badge>

Copy

567

<Badge muted className="text-xs">567</Badge>

Copy

Badges can have custom CSS compatible colors which includes hex and color names.

678

<Badge color="salmon" className="text-xs">678</Badge>

Copy

Badges can be rounded in three ways: curved, rounded, and pill.

789

<Badge info curved className="text-xs">789</Badge>

Copy

890

<Badge warning rounded className="text-xs">890</Badge>

Copy

901

<Badge success pill className="text-xs">901</Badge>

Copy

You can add your own custom class to the badge component or use the frui-badge CSS class.