Playbook Design System

Title Explains

Body text goes into detail with possible steps for user to take

<%= pb_rails("flex", props: {align: "center", justify: "center"}) do %>
  <%= pb_rails("empty_state", props: {
    description: "Body text goes into detail with possible steps for user to take",
    header: "Title Explains",
    image: "default",
  }) %>
<% end %>

Size

Title Explains

Body text goes into detail with possible steps for user to take

Next Action Alt Action

Title Explains

Body text goes into detail with possible steps for user to take

Next Action Alt Action

<%= pb_rails("flex", props: {align: "center", spacing: "evenly", wrap: true}) do %>
  <%= pb_rails("empty_state", props: {
    description: "Body text goes into detail with possible steps for user to take",
    header: "Title Explains",
    image: "default",
    primary_button: "Next Action",
    primary_button_url: "#primary_button_url",
    link_button: "Alt Action",
    link_button_url: "#link_button_url",
    size: "sm",
  }) %>

  <%= pb_rails("empty_state", props: {
    description: "Body text goes into detail with possible steps for user to take",
    header: "Title Explains",
    image: "default",
    primary_button: "Next Action",
    primary_button_url: "#primary_button_url",
    link_button: "Alt Action",
    link_button_url: "#link_button_url",
    size: "lg",
  }) %>
<% end %>

Orientation

Title Explains

Body text goes into detail with possible steps for user to take

Next Action

<%= pb_rails("flex", props: {align: "center", justify: "center", wrap: true}) do %>
  <%= pb_rails("empty_state", props: {
    description: "Body text goes into detail with possible steps for user to take",
    header: "Title Explains",
    image: "default",
    orientation:"horizontal",
    alignment: "left",
    size: "lg",
    primary_button: "Next Action",
    primary_button_url: "#primary_button_url",
  }) %>
<% end %>

Alignment

Title Explains

Body text goes into detail with possible steps for user to take

Next Action

Title Explains

Body text goes into detail with possible steps for user to take

Next Action

Title Explains

Body text goes into detail with possible steps for user to take

Next Action

<%= pb_rails("flex", props: {align: "center", spacing: "evenly", wrap: true}) do %>
  <%= pb_rails("empty_state", props: {
    description: "Body text goes into detail with possible steps for user to take",
    header: "Title Explains",
    image: "default",
    primary_button: "Next Action",
    primary_button_url: "#primary_button_url",
    alignment: "left",
  }) %>

  <%= pb_rails("empty_state", props: {
    description: "Body text goes into detail with possible steps for user to take",
    header: "Title Explains",
    image: "default",
    primary_button: "Next Action",
    primary_button_url: "#primary_button_url",
  }) %>

    <%= pb_rails("empty_state", props: {
    description: "Body text goes into detail with possible steps for user to take",
    header: "Title Explains",
    image: "default",
    primary_button: "Next Action",
    primary_button_url: "#primary_button_url",
    alignment: "right",
  }) %>
<% end %>

Loading Inline

Default

Loading

<%= pb_rails("loading_inline") %>

<%= pb_rails("loading_inline", props: {
    align: "center"
}) %>

<%= pb_rails("loading_inline", props: {
    align: "right"
}) %>

Custom Text

Saving

<%= pb_rails("loading_inline", props: {
    text: "Saving"
}) %> 

<%= pb_rails("loading_inline", props: {
    align: "center",
    text: "Saving"
}) %> 

<%= pb_rails("loading_inline", props: {
    align: "right",
    text: "Saving",
}) %>

Variant

Dotted Spinner

Solid Spinner

<%= pb_rails("loading_inline", props: {text: "Dotted Spinner", variant: "dotted"}) %>

<br/>

<%= pb_rails("loading_inline", props: {text: "Solid Spinner", variant: "solid"}) %>

Progress Pills

Default

Progress pills start at 45px wide if the container allows, but will shrink down to 1px as the container gets smaller. Resize this window to see each pill shrink.

<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2 }) %>
<%= pb_rails("progress_pills", props: { aria: { label: "9 out of 18 steps complete" }, steps: 18, active: 9, margin_top: "md" }) %>

Status

Status:

Orientation

<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2, title:"Status:", value:"Orientation" }) %>

Full Container Width

Pass full_width_pill: true to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.

<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 5 steps complete" }, steps: 5, active: 2, full_width_pill: true }) %>

Progress Simple

Default

<%= pb_rails("progress_simple", props: { percent: 64.9 }) %>

Setting Values

<%= pb_rails("progress_simple", props: { percent: 64.9 }) %>

<br>

<%= pb_rails("progress_simple", props: { value: 2, max: 10 }) %>

Within a Flex

When rendering a Progress Simple through within a Flex container, you must pass flex="1" to the kit itself so that it fills the available space

<%= pb_rails("flex") do %>
 <%= pb_rails("progress_simple", props: { flex: "1", percent: 50 }) %>
<% end %>

Progress Bar Width

<%= pb_rails("progress_simple", props: { percent: 40, width: "100px" }) %>

Variants

Progress Simple can pass colors - primary, green, red, and yellow. Variants names are default, positive, negative, and warning, respectively.

<%= pb_rails("progress_simple", props: { percent: 64.9, variant: "default" }) %>

<br>

<%= pb_rails("progress_simple", props: { percent: 90, variant: "positive" }) %>

<br>

<%= pb_rails("progress_simple", props: { percent: 10, variant: "negative" }) %>

<br>

<%= pb_rails("progress_simple", props: { percent: 40, variant: "warning" }) %>

Muted

<%= pb_rails("progress_simple", props: { percent: 64.9, muted: true }) %>

Align

<%= pb_rails("progress_simple", props: { percent: 64.9, width: "100px" }) %>
<br>
<%= pb_rails("progress_simple", props: { percent: 64.9, width: "100px", align: "center" }) %>
<br>
<%= pb_rails("progress_simple", props: { percent: 64.9, width: "100px", align: "right" }) %>

The variant prop can be set to tracker to achieve this UI. Tracker is only available with the horizontal orientation and it is also recommended that you set the icon prop to true for this variant.

This variant takes children just like the default progress step, however, it is best to use the caption kit for children in this variant.

<br><br>
<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
      <%= pb_rails("caption", props:{text: "Ordered"})%>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
      <%= pb_rails("caption", props:{text: "Shipped"})%>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
      <%= pb_rails("caption", props:{text: "Delivered"})%>
  <% end %>
<% end %>

<br>

<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
  <% end %>
    <%= pb_rails("progress_step/progress_step_item", props: {status: "hidden"}) do %>
  <% end %>
    <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
  <% end %>
<% end %>

Color

Ordered
Shipped
Delivered

The color prop can also be used to set color for the tracker variant. Options for color are primary and info with default being set to primary.

NOTE: The color prop is only available with the tracker variant.

<br><br>
<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true, color: "info"}) do %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
      <%= pb_rails("caption", props:{text: "Ordered"})%>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
      <%= pb_rails("caption", props:{text: "Shipped"})%>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
      <%= pb_rails("caption", props:{text: "Delivered"})%>
  <% end %>
<% end %>

<br>

Custom Icon

Ordered
Shipped
Delivered

Custom icons can also be set for individual steps. Simply use the icon prop for the relevant ProgressStepItem/progress_step_item as shown here.

<br><br>
<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
      <%= pb_rails("caption", props:{text: "Ordered"})%>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", icon: "exclamation-triangle"}) do %>
      <%= pb_rails("caption", props:{text: "Shipped"})%>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
      <%= pb_rails("caption", props:{text: "Delivered"})%>
  <% end %>
<% end %>

Timeline

Default

Conversation started

Trip #12422

Refund issue #12422

Conversation resolved

Jackson Heights

37-27 74th Street

Greenpoint

81 Gate St Brooklyn

<%= pb_rails("timeline") do %>
    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
        <%= pb_rails("body", props: {
            text: "Conversation started",
            color: "light"
        }) %>
    <% end %>
    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal"}) do %>
        <%= pb_rails("body", props: {
            text: "Trip #12422",
            color: "light"
        }) %>
    <% end %>
    <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
        <%= pb_rails("body", props: {
            text: "Refund issue #12422",
            color: "light"
        }) %>
    <% end %>
    <%= pb_rails("timeline/item", props: {icon: "smile", icon_color: "green"}) do %>
        <%= pb_rails("body", props: {
            text: "Conversation resolved",
            color: "light"
    }) %>
    <% end %>
<% end %>

<br /><br />

<%= pb_rails("timeline") do %>
    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "dotted"  }) do %>
        <%= pb_rails("title_detail", props: {
            title: "Jackson Heights",
            detail: "37-27 74th Street"
        }) %>
    <% end %>
    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal" }) do %>
        <%= pb_rails("title_detail", props: {
            title: "Greenpoint",
            detail: "81 Gate St Brooklyn"
        }) %>
    <% end %>
<% end %>

Vertical

Conversation started

Trip #12422

Refund issue #12422

Conversation resolved

Jackson Heights

37-27 74th Street

Greenpoint

81 Gate St Brooklyn

<%= pb_rails("timeline", props: {orientation: "vertical"}) do %>
    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
        <%= pb_rails("body", props: {
            text: "Conversation started",
            color: "light"
        }) %>
    <% end %>
    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal"}) do %>
        <%= pb_rails("body", props: {
            text: "Trip #12422",
            color: "light"
        }) %>
    <% end %>
    <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
        <%= pb_rails("body", props: {
            text: "Refund issue #12422",
            color: "light"
        }) %>
    <% end %>
    <%= pb_rails("timeline/item", props: {icon: "smile", icon_color: "green"}) do %>
        <%= pb_rails("body", props: {
            text: "Conversation resolved",
            color: "light"
    }) %>
    <% end %>
<% end %>

<br /><br />

<%= pb_rails("timeline", props: {orientation: "vertical"}) do %>
    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "dotted"}) do %>
        <%= pb_rails("title_detail", props: {
            title: "Jackson Heights",
            detail: "37-27 74th Street"
        }) %>
    <% end %>
    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal" }) do %>
        <%= pb_rails("title_detail", props: {
            title: "Greenpoint",
            detail: "81 Gate St Brooklyn"
        }) %>
    <% end %>
<% end %>

With Date

Apr

4 Jackson Heights

37-27 74th Street

Greenpoint

81 Gate St Brooklyn

Apr

5 Society Hill

72 E St Astoria

Apr

4 Jackson Heights

37-27 74th Street

Greenpoint

81 Gate St Brooklyn

Apr

5 Society Hill

72 E St Astoria

Mar

20

2018

Jackson Heights

37-27 74th Street

Greenpoint

81 Gate St Brooklyn

May

20

2018

Society Hill

72 E St Astoria

Use the optional showDate prop to render the timeline kit with a visible date. By default, if the date is from the current year, the year will not be displayed; however, if the date is NOT from the current year, the kit will display the year as well.

<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today }) do %>
        <%= pb_rails("title_detail", props: {
            title: "Jackson Heights",
            detail: "37-27 74th Street"
        }) %>
    <% end %>
    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
        <%= pb_rails("title_detail", props: {
            title: "Greenpoint",
            detail: "81 Gate St Brooklyn"
        }) %>
    <% end %>
    <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do %>
        <%= pb_rails("title_detail", props: {
            title: "Society Hill",
            detail: "72 E St Astoria"
        }) %>
    <% end %>
<% end %>

<br /><br /><br />

<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today }) do %>
        <%= pb_rails("title_detail", props: {
            title: "Jackson Heights",
            detail: "37-27 74th Street"
        }) %>
    <% end %>
    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
        <%= pb_rails("title_detail", props: {
            title: "Greenpoint",
            detail: "81 Gate St Brooklyn"
        }) %>
    <% end %>
    <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do %>
        <%= pb_rails("title_detail", props: {
            title: "Society Hill",
            detail: "72 E St Astoria"
        }) %>
    <% end %>
<% end %>

<br /><br /><br />

<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.new(2018, 03, 20) }) do %>
        <%= pb_rails("title_detail", props: {
            title: "Jackson Heights",
            detail: "37-27 74th Street"
        }) %>
    <% end %>
    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
        <%= pb_rails("title_detail", props: {
            title: "Greenpoint",
            detail: "81 Gate St Brooklyn"
        }) %>
    <% end %>
    <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.new(2018, 05, 20) }) do %>
        <%= pb_rails("title_detail", props: {
            title: "Society Hill",
            detail: "72 E St Astoria"
        }) %>
    <% end %>
<% end %>

With Children

Any Kit Here

Jackson Heights

37-27 74th Street

Any Kit

Greenpoint

81 Gate St Brooklyn

Apr

5 Society Hill

72 E St Astoria

Any Kit

Jackson Heights

37-27 74th Street

Apr

5 Society Hill

72 E St Astoria

3

Greenpoint

81 Gate St Brooklyn

Any kit can be used inside of our compound components of label, step, or detail. Expand the code snippet below to see how to use these children elements.

<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>

      <% item.label do %>
        <%= pb_rails("timeline/label") do %>
          <%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
        <% end %>
      <% end %>
    
      <% item.step do %>
        <%= pb_rails("timeline/step", props: { icon: 'check', icon_color: 'teal' }) %>
      <% end %>
    
      <% item.detail do %>
        <%= pb_rails("title_detail", props: {
          title: "Jackson Heights",
          detail: "37-27 74th Street"
        }) %>
      <% end %>
    <% end %>
    <%= pb_rails("timeline/item", props: { line_style: "dotted"}) do |item| %>

      <% item.step do %>
        <%= pb_rails("timeline/step") do %>
          <%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
        <% end %>
      <% end %>
    
      <% item.detail do %>
        <%= pb_rails("title_detail", props: {
          title: "Greenpoint",
          detail: "81 Gate St Brooklyn"
        }) %>
      <% end %>
    <% end %>

    <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do |item| %>
      <%= pb_rails("title_detail", props: {
          title: "Society Hill",
          detail: "72 E St Astoria"
      }) %>
    <% end %>
<% end %>

<br /><br /><br />

<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
  <%= pb_rails("timeline/item") do |item| %>

    <% item.label do %>
      <%= pb_rails("timeline/label") do %>
        <%= pb_rails("title", props: { text: "Any Kit", size: 4 }) %>
      <% end %>
    <% end %>
  
    <% item.step do %>
      <%= pb_rails("timeline/step", props: { icon: 'user', icon_color: 'royal' }) %>
    <% end %>
  
    <% item.detail do %>
      <%= pb_rails("title_detail", props: {
        title: "Jackson Heights",
        detail: "37-27 74th Street"
      }) %>
    <% end %>
  <% end %>

  <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1, line_style: "dotted" }) do |item| %>
    <%= pb_rails("title_detail", props: {
        title: "Society Hill",
        detail: "72 E St Astoria"
    }) %>
  <% end %>

  <%= pb_rails("timeline/item") do |item| %>

    <% item.step do %>
      <%= pb_rails("timeline/step") do %>
        <%= pb_rails("pill", props: { text: "3" , variant: "success" }) %>
      <% end %>
    <% end %>
  
    <% item.detail do %>
      <%= pb_rails("title_detail", props: {
        title: "Greenpoint",
        detail: "81 Gate St Brooklyn"
      }) %>
    <% end %>
  <% end %>
<% end %>

Show Current Year

Apr

4

2026

Jackson Heights

37-27 74th Street

Greenpoint

81 Gate St Brooklyn

Apr

4

2026

Society Hill

72 E St Astoria

Apr

4

2026

Jackson Heights

37-27 74th Street

Greenpoint

81 Gate St Brooklyn

Apr

4

2026

Society Hill

72 E St Astoria

By default, the Timeline kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting showCurrentYear/show_current_year to true. Pass it to Timeline.Item/timeline/item when using its date prop, or to Timeline.Label/timeline/label if following the "With Children" pattern.

<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today, show_current_year: true }) do %>
        <%= pb_rails("title_detail", props: {
            title: "Jackson Heights",
            detail: "37-27 74th Street"
        }) %>
    <% end %>
    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
        <%= pb_rails("title_detail", props: {
            title: "Greenpoint",
            detail: "81 Gate St Brooklyn"
        }) %>
    <% end %>
    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
      <% item.label do %>
        <%= pb_rails("timeline/label", props: { date: Date.today, show_current_year: true }) %>
      <% end %>
      <% item.step do %>
        <%= pb_rails("timeline/step", props: { icon: 'map-marker-alt', icon_color: 'purple' }) %>
      <% end %>
      <% item.detail do %>
        <%= pb_rails("title_detail", props: {
          title: "Society Hill",
          detail: "72 E St Astoria"
        }) %>
      <% end %>
    <% end %>
<% end %>

<br /><br /><br />

<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today, show_current_year: true }) do %>
        <%= pb_rails("title_detail", props: {
            title: "Jackson Heights",
            detail: "37-27 74th Street"
        }) %>
    <% end %>
    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
        <%= pb_rails("title_detail", props: {
            title: "Greenpoint",
            detail: "81 Gate St Brooklyn"
        }) %>
    <% end %>
    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
      <% item.label do %>
        <%= pb_rails("timeline/label", props: { date: Date.today, show_current_year: true }) %>
      <% end %>
      <% item.step do %>
        <%= pb_rails("timeline/step", props: { icon: 'map-marker-alt', icon_color: 'purple' }) %>
      <% end %>
      <% item.detail do %>
        <%= pb_rails("title_detail", props: {
          title: "Society Hill",
          detail: "72 E St Astoria"
        }) %>
      <% end %>
    <% end %>
<% end %>

With Gap

Conversation started

Trip #12422

Refund issue #12422

Conversation started

Trip #12422

Refund issue #12422

Conversation started

Trip #12422

Refund issue #12422

Conversation started

Trip #12422

Refund issue #12422

Use the optional itemGap prop to render the timeline kit with adjusted spacing between nodes. The itemGap prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.

<%= pb_rails("flex", props: { justify: "evenly" }) do %>
    <%= pb_rails("flex/flex_item") do %>
        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "xs"}) do %>
            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                <%= pb_rails("body", props: {
                    text: "Conversation started",
                    color: "light"
                }) %>
            <% end %>
            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
                <%= pb_rails("body", props: {
                    text: "Trip #12422",
                    color: "light"
                }) %>
            <% end %>
            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
                <%= pb_rails("body", props: {
                    text: "Refund issue #12422",
                    color: "light"
                }) %>
            <% end %>
        <% end %>
    <% end %>

    <%= pb_rails("flex/flex_item") do %>
        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "sm"}) do %>
            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                <%= pb_rails("body", props: {
                    text: "Conversation started",
                    color: "light"
                }) %>
            <% end %>
            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
                <%= pb_rails("body", props: {
                    text: "Trip #12422",
                    color: "light"
                }) %>
            <% end %>
            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
                <%= pb_rails("body", props: {
                    text: "Refund issue #12422",
                    color: "light"
                }) %>
            <% end %>
        <% end %>
    <% end %>

    <%= pb_rails("flex/flex_item") do %>
        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "md"}) do %>
            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                <%= pb_rails("body", props: {
                    text: "Conversation started",
                    color: "light"
                }) %>
            <% end %>
            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
                <%= pb_rails("body", props: {
                    text: "Trip #12422",
                    color: "light"
                }) %>
            <% end %>
            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
                <%= pb_rails("body", props: {
                    text: "Refund issue #12422",
                    color: "light"
                }) %>
            <% end %>
        <% end %>
    <% end %>

    <%= pb_rails("flex/flex_item") do %>
        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "lg"}) do %>
            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                <%= pb_rails("body", props: {
                    text: "Conversation started",
                    color: "light"
                }) %>
            <% end %>
            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
                <%= pb_rails("body", props: {
                    text: "Trip #12422",
                    color: "light"
                }) %>
            <% end %>
            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
                <%= pb_rails("body", props: {
                    text: "Refund issue #12422",
                    color: "light"
                }) %>
            <% end %>
        <% end %>
    <% end %>
<% end %>

Skeleton Loading

Default

<%= pb_rails("skeleton_loading") %>

Color

The SkeletonLoading component has a default and a white color variant.

<%= pb_rails("card", props: { border_none: true }) do %>
    <%= pb_rails("skeleton_loading") %>
<% end %>

<%= pb_rails("card", props: { background: "light", border_none: true }) do %>
    <%= pb_rails("skeleton_loading", props: { color: "white" }) %>
<% end %>

Layout

Use the stack and gap props in conjunction to layer multiple Skeleton loading bars on top of each other.

stack accepts a number that correlates to the number of rows (1 is default), and gap accepts a portion of our spacing props (xxs as default, xs, sm, md, lg, xl, xxl) to set the pixel distance between each row. gap will not do anything if there is no corresponding stack prop set.

<%= pb_rails("skeleton_loading", props: { stack: 5 }) %>

<%= pb_rails("skeleton_loading", props: { gap: "md", padding_top: "xl", stack: 3 }) %>

Border Radius

The border_radius prop accepts all of our BorderRadius tokens, with sm as default.

<%= pb_rails("flex", props: { justify: "evenly" }) do %>
    <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "50px", width: "100px"}) %>
    <%= pb_rails("skeleton_loading", props: { border_radius: "xl", height: "50px", width: "100px"}) %>
    <%= pb_rails("skeleton_loading", props: { border_radius: "lg", height: "50px", width: "100px"}) %>
    <%= pb_rails("skeleton_loading", props: { border_radius: "md", height: "50px", width: "100px"}) %>
    <%= pb_rails("skeleton_loading", props: { height: "50px", width: "100px"}) %>
    <%= pb_rails("skeleton_loading", props: { border_radius: "xs", height: "50px", width: "100px"}) %>
    <%= pb_rails("skeleton_loading", props: { border_radius: "none", height: "50px", width: "100px"}) %>
<% end %>

Height & Width

The height and width props accept pixel and percentage values. If using a percentage for height, the parent container must have a set height.

Set the height and width props to the same value to make a square. A rounded border_radius will make a square a circle. If using percentages to make a square, your parent container must also be a square.

<%= pb_rails("skeleton_loading", props: { height: "100px", width: "50%" }) %>

<%= pb_rails("skeleton_loading", props: { gap: "md", height: "20px", margin_y: "md", stack: 3, width: "50px" }) %>

<%= pb_rails("card", props: { height: "200px", margin_bottom: "md", padding: "none", width: "100%" }) do %>
    <%= pb_rails("skeleton_loading", props: { border_radius: "md", gap: "xl", height: "50%", width: "300px" }) %>
<% end %>

<%= pb_rails("card", props: { height: "200px", margin_bottom: "md", padding: "none", width: "100%" }) do %>
    <%= pb_rails("skeleton_loading", props: { border_radius: "md", gap: "xl", height: "30%", stack: 2, width: "70%" }) %>
<% end %>

<%= pb_rails("skeleton_loading", props: { height: "150px", margin_y: "md", width: "150px" }) %>

<%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "150px", width: "150px" }) %>

User Component Example

<%= pb_rails("button", props: { id: "toggle-user-button", margin_bottom: "md", text: "Show User", variant: "secondary" }) %>

<div id="skeleton-loading-user-content">
    <%= pb_rails("flex", props: { align_items: "center" }) do %>
        <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "38px", padding_right: "sm", width: "38px"}) %>
        <%= pb_rails("skeleton_loading", props: { gap: "xxs", height: "18px", stack: 2, width: "161px"}) %>
    <% end %>
    <%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
        <%= pb_rails("flex", props: { align_items: "center", flex_direction: "column" }) do %>
            <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "100px", padding_bottom: "xs", width: "100px"}) %>
            <%= pb_rails("skeleton_loading", props: { height: "32px", padding_bottom: "xxs", width: "144px"}) %>
            <%= pb_rails("skeleton_loading", props: { height: "21px", width: "164px"}) %>
        <% end %>
    <% end %>
</div>

<div id="user-content" style="display: none;">
    <div>
        <%= pb_rails("user", props: {
            name: "Anna Black",
            title: "Remodeling Consultant",
            orientation: "horizontal",
            align: "left",
            avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
        }) %>
    </div>
    <div>
        <%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
            <%= pb_rails("user", props: {
                name: "Anna Black",
                title: "Remodeling Consultant",
                orientation: "vertical",
                align: "center",
                size: "lg",
                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
            }) %>
        <% end %>
    </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const toggleButton = document.getElementById('toggle-user-button')
    const skeletonUserContentDiv = document.getElementById('skeleton-loading-user-content')
    const userContentDiv = document.getElementById('user-content')

    let isLoading = true

    toggleButton.addEventListener('click', function() {
      isLoading = !isLoading

      if (isLoading) {
        skeletonUserContentDiv.style.display = 'block'
        userContentDiv.style.display = 'none'
        toggleButton.textContent = 'Show User'
      } else {
        skeletonUserContentDiv.style.display = 'none'
        userContentDiv.style.display = 'block'
        toggleButton.textContent = 'Show Skeleton Loading'
      }
    })
  })
</script>

Filter Component Example

<%= pb_rails("button", props: { id: "toggle-filter-button", margin_bottom: "md", text: "Show Filter", variant: "secondary" }) %>

<div id="skeleton-loading-filter-content">
  <%= pb_rails("card", props: { margin_bottom: "lg" }) do %>
    <%= pb_rails("flex", props: { align_items: "center", justify: "between", orientation: "row" }) do %>
      <%= pb_rails("flex", props: { align_items: "center", justify: "start", orientation: "row" }) do %>
        <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "40px", margin_right: "sm", width: "40px" }) %>
        <%= pb_rails("skeleton_loading", props: { height: "16px", margin_right: "md", width: "80px" }) %>
      <% end %>
      <%= pb_rails("flex", props: { align_items: "center", justify: "end", orientation: "row" }) do %>
        <%= pb_rails("skeleton_loading", props: { height: "18px", width: "120px" }) %>
      <% end %>
    <% end %>
  <% end %>

  <%= pb_rails("skeleton_loading", props: { height: "127px", width: "100%" }) %>
</div>

<div id="filter-content" style="display: none;">
  <%= pb_rails("filter", props: {
    margin_bottom: "xl",
    min_width: "360px",
    id: "2",
    filters: [
      { name: "name", value: "John Wick" }
    ],
    sort_menu: [
      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
    ],
    results: 546,
    template: "single"
  }) do %>
    <% example_collection = [
      OpenStruct.new(name: "USA", value: 1),
      OpenStruct.new(name: "Canada", value: 2),
      OpenStruct.new(name: "Brazil", value: 3),
      OpenStruct.new(name: "Philippines", value: 4),
      OpenStruct.new(name: "A galaxy far far away...", value: 5)
    ] %>

    <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
      <%= form.text_field :example_text_field, props: { label: true } %>
      <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>

      <%= form.actions do |action| %>
        <%= action.submit props: {
          text: "Apply",
          data: {
            disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
        },}%>
        <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
      <% end %>
    <% end %>
  <% end %>

  <%= pb_rails("filter", props: {
    min_width: "360px",
    id: "1",
    filters: [
      { name: "name", value: "John Wick" },
      { name: "city", value: "San Francisco"}
    ],
    sort_menu: [
      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
    ],
    template: "default",
    results: 1,
  }) do %>
    <% example_collection = [
      OpenStruct.new(name: "USA", value: 1),
      OpenStruct.new(name: "Canada", value: 2),
      OpenStruct.new(name: "Brazil", value: 3),
      OpenStruct.new(name: "Philippines", value: 4),
      OpenStruct.new(name: "A galaxy far far away...", value: 5)
    ] %>
    <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
      <%= form.text_field :example_text_field, props: { label: true } %>
      <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>

      <%= form.actions do |action| %>
        <%= action.submit props: {
          text: "Apply",
          data: {
            disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
        },}%>
        <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
      <% end %>
    <% end %>
  <% end %>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const toggleButton = document.getElementById('toggle-filter-button')
    const skeletonFilterContentDiv = document.getElementById('skeleton-loading-filter-content')
    const filterContentDiv = document.getElementById('filter-content')
    const secondFilterContentDiv = document.getElementById('second-filter-content')

    let isLoading = true

    toggleButton.addEventListener('click', function() {
      isLoading = !isLoading

      if (isLoading) {
        skeletonFilterContentDiv.style.display = 'block'
        filterContentDiv.style.display = 'none'
        toggleButton.textContent = 'Show Filter'
      } else {
        skeletonFilterContentDiv.style.display = 'none'
        filterContentDiv.style.display = 'block'
        toggleButton.textContent = 'Show Skeleton Loading'
      }
    })
  })
</script>

State And Progress Indicators

Empty State

Title Explains

Title Explains

Title Explains

Title Explains

Title Explains

Title Explains

Title Explains

Loading Inline

Progress Pills

Status:

Progress Simple

Progress Step

Timeline

Jackson Heights

Greenpoint

Jackson Heights

Greenpoint

4

Jackson Heights

Greenpoint

5

Society Hill

4

Jackson Heights

Greenpoint

5

Society Hill

20

Jackson Heights

Greenpoint

20

Society Hill

Any Kit Here

Jackson Heights

Greenpoint

5

Society Hill

Any Kit

Jackson Heights

5

Society Hill

Greenpoint

4

Jackson Heights

Greenpoint

4

Society Hill

4

Jackson Heights

Greenpoint

4

Society Hill

Skeleton Loading

Anna Black

Anna Black

John Wick

John Wick

San Francisco

Results:

Contribute to Playbook

Power

Connect