Playbook Design System

Form Pill User

Code Example

Close

import React from 'react'
import FormPill from '../_form_pill.jsx'

const FormPillDefault = (props) => {
  return (

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

export default FormPillDefault

Form Pill Size

Code Example

Close

import React from 'react'
import FormPill from '../_form_pill.jsx'

const FormPillSize = (props) => {
  return (

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

export default FormPillSize

Form Pill Tag

Code Example

Close

import React from 'react'
import FormPill from '../_form_pill.jsx'

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