A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color here.
import React from 'react' import Pill from 'playbook-ui' const PillVariants = (props) => { return ( <div> <Pill text="success" variant="success" /> <Pill text="error" variant="error" /> <Pill text="warning" variant="warning" /> <Pill text="info" variant="info" /> <Pill text="neutral" variant="neutral" /> <Pill text="primary" variant="primary" /> </div> ) } export default PillVariants
Pass textTransform = "none"
prop and the text will remain without modification.