Label Pill

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

Rails
React

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.

Code Example

<%= pb_rails("label_pill", props: {
  label: "Service Needed",
  pill_value: "76",
}) %>

<%= pb_rails("label_pill", props: {
  label: "Waiting",
  pill_value: "69",
  variant: "success"
}) %>

<%= pb_rails("label_pill", props: {
  label: "In Service",
  pill_value: "28",
  variant: "error"
}) %>

<%= pb_rails("label_pill", props: {
  label: "Fully Serviced",
  pill_value: "101",
  variant: "warning"
}) %>

<%= pb_rails("label_pill", props: {
  label: "Inbox",
  pill_value: "197",
  variant: "info"
}) %>

<%= pb_rails("label_pill", props: {
  label: "Outbox",
  pill_value: "13",
  variant: "neutral"
}) %>

<%= pb_rails("label_pill", props: {
  label: "Inbox",
  pill_value: "218",
  variant: "primary"
}) %>

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

4.16.0

Label Pill

76

69

28

101

197

13

218

Things to Avoid