Playbook Design System

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

Wrapped Text

For Form Pills with longer text, the wrapped prop can be used to wrap the label within each Form Pill.

Note: Avoid using the wrapped and small props together, as their styles conflict and may cause functionality issues.

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 FormPillWrapped = (props) => {
  return (
    <>
      <Typeahead
          htmlOptions={{ style: { maxWidth: "240px" } }}
          isMulti
          label="Wrapped Within Typeahead"
          options={names}
          wrapped
      />
      <Caption text="Form Pill Wrapped Text"/>
      <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}
            wrapped
        />
        <FormPill
            icon="badge-check"
            onClick={() => {alert('Click!')}}
            tabIndex={0}
            text="icon and a very long tag to show wrapped text"
            wrapped
        />
        <FormPill
            onClick={() => {alert('Click!')}}
            tabIndex={0}
            text="form pill with a very long tag to show wrapped text"
            wrapped
        />
      </Card>
    </>
  )
}

export default FormPillWrapped

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

Form Pill

Available Props

Contribute to Playbook

Power

Connect