3.0.1






Badge

Rectangle

+1
+4
+1000

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

+1
+4
+1000

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

+1
+4
+1000
+1
+4
+1000
+1
+4
+1000
+1
+4
+1000
+1
+4
+1000
+1
+4
+1000

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

+1
+4
+1000
+1
+4
+1000
+1
+4
+1000
+1
+4
+1000
+1
+4
+1000
+1
+4
+1000

Close
<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
dark
rounded
text
variant