Tags

Badge

Rectangle

+1000

<div>
  <%= pb_rails("badge", props: {
    text: "+1",
    variant: "primary"
  }) %>

  <%= pb_rails("badge", props: {
    text: "+4",
    variant: "primary"
  }) %>

  <%= pb_rails("badge", props: {
    text: "+1000",
    variant: "primary"
  }) %>
</div>

Rounded

+1000

<div>
  <%= pb_rails("badge", props: {
    text: "+1",
    variant: "primary",
    rounded: true
  }) %>

  <%= pb_rails("badge", props: {
    text: "+4",
    variant: "primary",
    rounded: true
  }) %>

  <%= pb_rails("badge", props: {
    text: "+1000",
    variant: "primary",
    rounded: true
  }) %>
</div>

Colors

+1000

<div>
  <%= pb_rails("badge", props: {
    text: "+1",
    variant: "primary",
    rounded: true
  }) %>

  <%= pb_rails("badge", props: {
    text: "+4",
    variant: "primary"
  }) %>

  <%= pb_rails("badge", props: {
    text: "+1000",
    variant: "primary",
  }) %>
</div>

<div>
  <%= pb_rails("badge", props: {
    text: "+1",
    variant: "success",
    rounded: true
  }) %>

  <%= pb_rails("badge", props: {
    text: "+4",
    variant: "success"
  }) %>

  <%= pb_rails("badge", props: {
    text: "+1000",
    variant: "success"
  }) %>
</div>

<div>
  <%= pb_rails("badge", props: {
    text: "+1",
    variant: "warning",
    rounded: true
  }) %>

  <%= pb_rails("badge", props: {
    text: "+4",
    variant: "warning"
  }) %>

  <%= pb_rails("badge", props: {
    text: "+1000",
    variant: "warning"
  }) %>
</div>

<div>
  <%= pb_rails("badge", props: {
    text: "+1",
    variant: "error",
    rounded: true
  }) %>

  <%= pb_rails("badge", props: {
    text: "+4",
    variant: "error"
  }) %>

  <%= pb_rails("badge", props: {
    text: "+1000",
    variant: "error"
  }) %>
</div>

<div>
  <%= pb_rails("badge", props: {
    text: "+1",
    variant: "info",
    rounded: true
  }) %>

  <%= pb_rails("badge", props: {
    text: "+4",
    variant: "info"
  }) %>

  <%= pb_rails("badge", props: {
    text: "+1000",
    variant: "info"
  }) %>
</div>

<div>
  <%= pb_rails("badge", props: {
    text: "+1",
    rounded: true
  }) %>

  <%= pb_rails("badge", props: {
    text: "+4",
    variant: "neutral"
  }) %>

  <%= pb_rails("badge", props: {
    text: "+1000",
    variant: "neutral"
  }) %>
</div>

Notification

<div>
  <%= pb_rails("badge", props: {
    text: "1",
    variant: "notification",
    rounded: true
  }) %>

  <%= pb_rails("badge", props: {
    text: "4",
    variant: "notification"
  }) %>
</div>

<div>
  <%= pb_rails("badge", props: {
    text: "1",
    variant: "notification_error",
    rounded: true
  }) %>

  <%= pb_rails("badge", props: {
    text: "4",
    variant: "notification_error"
  }) %>
</div>

Online Status

Colors

<%= pb_rails("online_status", props: { status: "offline", margin_y: "xs" }) %>
<%= pb_rails("online_status", props: { status: "online", margin_y: "xs" }) %>
<%= pb_rails("online_status", props: { status: "away", margin_y: "xs" }) %>
<%= pb_rails("online_status", props: { status: "error", margin_y: "xs" }) %>
<%= pb_rails("online_status", props: { status: "info", margin_y: "xs" }) %>
<%= pb_rails("online_status", props: { status: "primary", margin_y: "xs" }) %>

Size

<%= pb_rails("online_status", props: { size: "sm", margin_y: "xs" }) %>
<%= pb_rails("online_status", props: { size: "md", margin_y: "xs" }) %>
<%= pb_rails("online_status", props: { size: "lg", margin_y: "xs" }) %>

No Border

<%= pb_rails("online_status", props: { no_border: true }) %>

Pill

Default

<%= pb_rails("pill", props: { text: "Default" }) %>

Variants

success

error

warning

info

neutral

primary

<%= pb_rails("pill", props: { text: "success" , variant: "success" }) %>
<%= pb_rails("pill", props: { text: "error" , variant: "error" }) %>
<%= pb_rails("pill", props: { text: "warning" , variant: "warning" }) %>
<%= pb_rails("pill", props: { text: "info" , variant: "info" }) %>
<%= pb_rails("pill", props: { text: "neutral" , variant: "neutral" }) %>
<%= pb_rails("pill", props: { text: "primary" , variant: "primary" }) %>

Example

Success

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

<%= pb_rails("pill", props: { text_transform: "none" , text: "Success" , variant: "success" }) %>

Hashtag

Hashtag Types

<%= pb_rails("hashtag", props: {text: "470297", url: "https://google.com", type: "project"}) %>

<br/><br/>

<%= pb_rails("hashtag", props: {text: "123456", url: "https://google.com", type: "home"}) %>

<br/><br/>

<%= pb_rails("hashtag", props: {text: "345678", url: "https://google.com", type: "appointment"}) %>

<br/><br/>

<%= pb_rails("hashtag", props: {text: "123456", url: "https://google.com", type: "default"}) %>

Hashtag Links

P#Open in the same Window

P#Open in a new Window

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.

<%= pb_rails("hashtag", props: {text: "Open in the same Window", url: "https://google.com", type: "project"}) %>

<br/><br/>

<%= pb_rails("hashtag", props: {text: "Open in a new Window", url: "https://google.com", type: "project", target: "_blank"}) %>

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