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