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.
import React from 'react' import LabelPill from 'playbook-ui' const LabelPillDefault = (props) => ( <> <LabelPill label="Service Needed" pillValue="76" /> <LabelPill label="Waiting" pillValue="69" variant="success" /> <LabelPill label="In Service" pillValue="28" variant="error" /> <LabelPill label="Fully Serviced" pillValue="101" variant="warning" /> <LabelPill label="Inbox" pillValue="197" variant="info" /> <LabelPill label="Outbox" pillValue="13" variant="neutral" /> <LabelPill label="Inbox" pillValue="218" variant="primary" /> </> ) export default LabelPillDefault
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.