Tags

Badge

Rectangle

import React from 'react'

import { Badge } from 'playbook-ui'

const BadgeDefault = (props) => {
  return (
    <div>
      <Badge
          text="+1"
          variant="primary"
      />

      &nbsp;

      <Badge
          text="+4"
          variant="primary"
      />

      &nbsp;

      <Badge
          text="+1000"
          variant="primary"
      />
    </div>
  )
}

export default BadgeDefault

Rounded

import React from 'react'

import { Badge } from 'playbook-ui'

const BadgeRounded = (props) => {
  return (
    <div>
      <Badge
          rounded
          text="+1"
          variant="primary"
      />

      &nbsp;

      <Badge
          rounded
          text="+4"
          variant="primary"
      />

      &nbsp;

      <Badge
          rounded
          text="+1000"
          variant="primary"
      />
    </div>
  )
}

export default BadgeRounded

Colors

import React from 'react'

import { Badge } from 'playbook-ui'

const BadgeColors = (props) => {
  return (
    <div>
      <div>
        <Badge
            rounded
            text="+1"
            variant="primary"
        />

        &nbsp;

        <Badge
            text="+4"
            variant="primary"
        />

        &nbsp;

        <Badge
            text="+1000"
            variant="primary"
        />
      </div>

      <div>
        <Badge
            rounded
            text="+1"
            variant="success"
        />

        &nbsp;

        <Badge
            text="+4"
            variant="success"
        />

        &nbsp;

        <Badge
            text="+1000"
            variant="success"
        />
      </div>

      <div>
        <Badge
            rounded
            text="+1"
            variant="warning"
        />

        &nbsp;

        <Badge
            text="+4"
            variant="warning"
        />

        &nbsp;

        <Badge
            text="+1000"
            variant="warning"
        />
      </div>

      <div>
        <Badge
            rounded
            text="+1"
            variant="error"
        />

        &nbsp;

        <Badge
            text="+4"
            variant="error"
        />

        &nbsp;

        <Badge
            text="+1000"
            variant="error"
        />
      </div>

      <div>
        <Badge
            rounded
            text="+1"
            variant="info"
        />

        &nbsp;

        <Badge
            text="+4"
            variant="info"
        />

        &nbsp;

        <Badge
            text="+1000"
            variant="info"
        />
      </div>

      <div>
        <Badge
            rounded
            text="+1"
            variant="neutral"
        />

        &nbsp;

        <Badge
            text="+4"
            variant="neutral"
        />

        &nbsp;

        <Badge
            text="+1000"
            variant="neutral"
        />
      </div>
    </div>
  )
}

export default BadgeColors

Notification

import React from 'react'

import { Badge } from 'playbook-ui'

const BadgeNotification = (props) => {
  return (
    <>
      <div>
        <Badge
            rounded
            text="1"
            variant="notification"
        />

        &nbsp;

        <Badge
            text="4"
            variant="notification"
        />
      </div>

      <div>
        <Badge
            rounded
            text="1"
            variant="notificationError"
        />

        &nbsp;

        <Badge
            text="4"
            variant="notificationError"
        />
      </div>
    </>
  )
}

export default BadgeNotification

Online Status

Colors

import React from 'react'

import { OnlineStatus } from 'playbook-ui'

const OnlineStatusDefault = (props) => (
  <>
    <OnlineStatus
        marginY="xs"
        status="offline"
    />
    <OnlineStatus
        marginY="xs"
        status="online"
    />
    <OnlineStatus
        marginY="xs"
        status="away"
    />
    <OnlineStatus
        marginY="xs"
        status="error"
    />
    <OnlineStatus
        marginY="xs"
        status="info"
    />
    <OnlineStatus
        marginY="xs"
        status="primary"
    />
  </>
)

export default OnlineStatusDefault

Size

import React from 'react'

import { OnlineStatus } from 'playbook-ui'

const OnlineStatusSize = (props) => (
  <>
    <OnlineStatus
        marginY="xs"
        size="sm"
    />
    <OnlineStatus
        marginY="xs"
        size="md"
    />
    <OnlineStatus
        marginY="xs"
        size="lg"
    />
  </>
)

export default OnlineStatusSize

No Border

import React from 'react'

import { OnlineStatus } from 'playbook-ui'

const OnlineStatusNoBorder = (props) => (
  <>
    <OnlineStatus
        noBorder
    />
  </>
)

export default OnlineStatusNoBorder

Pill

Default

import React from 'react'

import { Pill } from 'playbook-ui'

const PillDefault = (props) => {
  return (
    <div>
      <Pill
          text="default"
      />
    </div>
  )
}

export default PillDefault

Variants

import React from 'react'

import { Pill } from 'playbook-ui'

const PillVariants = (props) => {
  return (
    <div>
      <Pill
          text="success"
          variant="success"
      />

      <Pill
          text="error"
          variant="error"
      />

      <Pill
          text="warning"
          variant="warning"
      />

      <Pill
          text="info"
          variant="info"
      />

      <Pill
          text="neutral"
          variant="neutral"
      />

      <Pill
          text="primary"
          variant="primary"
      />
    </div>
  )
}

export default PillVariants

Example

Pass textTransform = "none" prop and the text will remain without modification.

import React from 'react'

import { Pill } from 'playbook-ui'

const PillExample = (props) => {
  return (
    <div>
      <Pill
          text="Success"
          textTransform="none"
          variant="success"
      />
    </div>
  )
}

export default PillExample

Use the target prop to control whether the link opens on the same or a new tab (same page is the default behavior). You can use any web/standard values or a custom string to specify your link target.

import React from 'react'

import { Hashtag } from 'playbook-ui'

const HashtagLink = (props) => {
  return (
    <div>
      <Hashtag
          text="Open in the same window"
          type="project"
          url="https://google.com"
      />
      <br />
      <br />
      <Hashtag
          target="_blank"
          text="Open in a new window"
          type="project"
          url="https://google.com"
      />
    </div>
  )
}

export default HashtagLink

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