User Badge

This kit was created to display employee icons related to a Nitro user. Currently there is the PVI logo and the Million Dollar Rep Icon.

Default

Use these to represent what affiliation an employee has.

import React from 'react'

import UserBadge from 'playbook-ui'

const UserBadgeDefault = () => {
  return (
    <div>
      <div>
        <UserBadge
            badge="veteran"
            size="md"
        />
      </div>
      <br />
      <br />
      <div>
        <UserBadge
            badge="million-dollar"
            size="md"
        />
      </div>
    </div>
  )
}

export default UserBadgeDefault

Sizes

import React from 'react'

import UserBadge from 'playbook-ui'

const UserBadgeSize = () => {
  return (
    <div>
      <div>
        <UserBadge
            badge="veteran"
            size="sm"
        />
      </div>
      <br />
      <br />
      <div>
        <UserBadge
            badge="veteran"
            size="md"
        />
      </div>
      <br />
      <br />
      <div>
        <UserBadge
            badge="veteran"
            size="lg"
        />
      </div>
    </div>
  )
}

export default UserBadgeSize

Things To Avoid

Don’t use this to replace icon kit.

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