Badge

Rails
React

Rectangle

+1000

Code Example

<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

Code Example

<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

Code Example

<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>

Dark

+1000

Code Example

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Available Props
id
data
classname
aria
children
margin
margin_bottom
margin_left
margin_right
margin_top
margin_x
margin_y
padding
padding_bottom
padding_left
padding_right
padding_top
padding_x
padding_y
dark
rounded
text
variant

4.17.0

Badge