Pill

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

See this kit in action in our sample UI

Default

Code Example

import React from 'react'
import Pill from '../_pill'

const PillDefault = (props) => {
  return (
    <div>
      <Pill
          text="default"
          {...props}
      />
    </div>
  )
}

export default PillDefault

Variants

Code Example

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

Example

Pass textTransform = "none" prop and the text will remain without modification.

Code Example

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

UI Samples using Pill Kit

Get the full picture. See how this kit is used in our samples.

Pill

See this kit in action in our sample UI

UI Samples using Pill Kit

Crowdsourced Posts