11.2.6
This kit combines the caption and pill kit with all its variants.
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.
<%= 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" }) %>
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.