Form Pill

Form Pill User

import React from 'react'
import FormPill from 'playbook-ui'

const FormPillDefault = (props) => {
  return (

    <div>
      <FormPill
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          onClick={() => alert('Click!')}
      />
      <br />
      <br />
      <FormPill
          name="Anna Black"
          onClick={() => alert('Click!')}
      />
    </div>
  )
}

export default FormPillDefault

Form Pill Size

import React from 'react'
import FormPill from 'playbook-ui'

const FormPillSize = (props) => {
  return (

    <div>
      <FormPill
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          size="small"
      />
      <br />
      <br />
      <FormPill
          name="Anna Black"
          size="small"
      />
    </div>
  )
}

export default FormPillSize

Form Pill Tag

import React from 'react'
import FormPill from 'playbook-ui'

const FormPillDefault = (props) => {
  return (
    <div>
      <FormPill
          onClick={() => {
alert('Click!')
}}
          text="this is a tag"
      />
    </div>
  )
}
export default FormPillDefault

Example

By default textTransform = "none". If there is a need to enforce lowercase, please pass the textTransform = "lowercase prop.

import React from 'react'
import FormPill from 'playbook-ui'

const FormPillExample = (props) => {
  return (
    <div>
      <FormPill
          onClick={() => alert('Click!')}
          text="THIS IS A TAG"
          textTransform="lowercase"
      />
    </div>
  )
}

export default FormPillExample

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat