import React from 'react' import FormPill from '../_form_pill' 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
import React from 'react' import FormPill from '../_form_pill' 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
import React from 'react' import FormPill from '../_form_pill' const FormPillDefault = (props) => { return ( <div> <FormPill onClick={() => { alert('Click!') }} text="this is a tag" {...props} /> </div> ) } export default FormPillDefault
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 '../_form_pill' const FormPillExample = (props) => { return ( <div> <FormPill onClick={() => alert('Click!')} text="THIS IS A TAG" textTransform="lowercase" {...props} /> </div> ) } export default FormPillExample