4.16.0






Label Pill

This kit combines the caption and pill kit with all its variants.

Default

Service Needed

76

Waiting

69

In Service

28

Fully Serviced

101

Inbox

197

Outbox

13

Inbox

218


Use this kit to display a label and a value with a certain status or color to highlight its significance or meaning. It can be a good design use to highlight the value incase it is important.


Things to Avoid

Don’t overuse this kit. Try to keep it to a single use per row if implemented on a table. Make sure it’s not used in a way that may confuse the user to think it’s a button or clickable.

Available Props
id
data
classname
aria
children
variant
label
pill_value