Form Pill

Summary

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!')}
          tabIndex={0}
      />
      <br />
      <br />
      <FormPill
          name="Anna Black"
          onClick={() => alert('Click!')}
          tabIndex={0}
      />
    </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"
          tabIndex={0}
      />
      <br />
      <br />
      <FormPill
          name="Anna Black"
          size="small"
          tabIndex={0}
      />
    </div>
  )
}

export default FormPillSize

Truncated Text

For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See here for more information on the truncate global prop.

import React from 'react'
import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'

const names = [
  { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
  { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
  { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
  { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
  { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
]

const FormPillTruncatedText = (props) => {
  return (
    <>
      <Typeahead
          htmlOptions={{ style: { maxWidth: "240px" }}}
          isMulti
          label="Truncation Within Typeahead"
          options={names}
          truncate={1}
      />
      <Caption text="Form Pill Truncation"/>
      <Card maxWidth="xs">
        <FormPill
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
            onClick={() => alert('Click!')}
            tabIndex={0}
            truncate={1}
        />
        <FormPill
            icon="badge-check"
            onClick={() => {alert('Click!')}}
            tabIndex={0}
            text="icon and a very long tag to show truncation"
            truncate={1}
        />
        <FormPill
            onClick={() => {alert('Click!')}}
            tabIndex={0}
            text="form pill with a very long tag to show truncation"
            truncate={1}
        />
      </Card>
    </>
  )
}

export default FormPillTruncatedText

Form Pill Tag

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

const FormPillDefault = (props) => {
  return (
    <div>
      <FormPill
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          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!')}
          tabIndex={0}
          text="THIS IS A TAG"
          textTransform="lowercase"
      />
    </div>
  )
}

export default FormPillExample

Form Pill Icon

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

const FormPillIcon = (props) => {
  return (
    <div>
      <FormPill
          icon="badge-check"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="icon and tag"
      />
    </div>
  )
}
export default FormPillIcon

Form Pill Colors

The Status, Data, and Product colors highlighted above can be passed to the color prop. Primary is the default color. Form pills with a text tag, an avatar, or an icon with text tag can all receive the color prop.

import React from 'react'
import { FormPill, Title } from 'playbook-ui'

const FormPillColors = (props) => {
  return (
    <div>
      <Title
          marginBottom="sm"
          size={4}
          text="Status Colors"
      />
      <FormPill
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Primary"
      />
      <FormPill
          color="neutral"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Neutral"
      />
      <FormPill
          color="success"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Success"
      />
      <FormPill
          color="warning"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Warning"
      />
      <FormPill
          color="error"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Error"
      />
      <FormPill
          color="info"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Info"
      />
      <Title
          marginBottom="sm"
          marginTop="md"
          size={4}
          text="Data Colors"
      />
      <FormPill
          color="data_1"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Data 1"
      />
      <FormPill
          color="data_2"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Data 2"
      />
      <FormPill
          color="data_3"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Data 3"
      />
      <FormPill
          color="data_4"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Data 4"
      />
      <FormPill
          color="data_5"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Data 5"
      />
      <FormPill
          color="data_6"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Data 6"
      />
      <FormPill
          color="data_7"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Data 7"
      />
      <FormPill
          color="data_8"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Data 8"
      />
      <Title
          marginBottom="sm"
          marginTop="md"
          size={4}
          text="Product Colors"
      />
      <FormPill
          color="windows"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Windows"
      />
      <FormPill
          color="siding"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Siding"
      />
      <FormPill
          color="roofing"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Roofing"
      />
      <FormPill
          color="doors"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Doors"
      />
      <FormPill
          color="gutters"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Gutters"
      />
      <FormPill
          color="solar"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Solar"
      />
      <FormPill
          color="insulation"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Insulation"
      />
      <FormPill
          color="accessories"
          onClick={() => {
            alert('Click!')
          }}
          tabIndex={0}
          text="Accessories"
      />
    </div>
  )
}
export default FormPillColors

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