Badges can be used for notification, tags, and status. They are used for count and numbers.
<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>
<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>
<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>