Playground :: Badge :: Rails Bootstrap Ui

<span class='badge  text-bg-danger'>Badge</span>
<div class='mt-5'>
  <button type='button' class='btn btn-primary position-relative'>
    Button
    <span class='badge position-absolute top-0 start-100 translate-middle  text-bg-danger'>
      +99
    </span>
  </button>
</div>

<% style = pill_button ? 'rounded-pill' : '' %>
<% inline = inline ? '' : 'position-absolute top-0 start-100 translate-middle' %>
<span class='badge <%= style %> text-bg-<%= colour %>'><%= text %></span>
<div class='mt-5'>
  <button type='button' class='btn btn-primary position-relative'>
    Button
    <span class='badge <%= inline %> <%= style %> text-bg-<%= colour %>'>
      <%= notification %>
    </span>
  </button>
</div>

Interactive playground for experimenting with different alert styles and states.

Param	Description	Input
Text	Badge text
Notification	Badge notification text
Colour	Default bootstrap theme colours
Pill Button	Add pill button class
Inline	Inline badge

No assets to display.

Embed Code

what's this?

<lookbook-embed app="https://railsbootstrapui.com/lookbook/" preview="BadgeComponentPreview" scenario="playground"></lookbook-embed>

Embed URL

what's this?

https://railsbootstrapui.com/lookbook/embed?props=%7B%22preview%22%3A%22BadgeComponentPreview%22%2C%22scenario%22%3A%22playground%22%7D

Lookbook v2.3.2

{ "version": "2.3.2", "env": "production", "config": { "project_name": "Rails Bootstrap Ui", "project_logo": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 70 63\">\n <defs>\n <style>.cls-2{fill:#fff;}</style>\n</defs>\n <title>Renuo_Full_Lockup</title>\n <g>\n <path class=\"cls-2\" d=\"M59,11.65a2.88,2.88,0,0,1-.59-.06,3.62,3.62,0,0,1-.56-.17,3.25,3.25,0,0,1-.52-.28,2.74,2.74,0,0,1-.83-.83,3.15,3.15,0,0,1-.28-.51A3.62,3.62,0,0,1,56,9.24a3.51,3.51,0,0,1,0-1.18,3.62,3.62,0,0,1,.17-.56A3.74,3.74,0,0,1,56.45,7a3.16,3.16,0,0,1,.37-.45,2.82,2.82,0,0,1,.46-.38,3.2,3.2,0,0,1,.52-.27,2.78,2.78,0,0,1,.56-.17,2.88,2.88,0,0,1,1.17,0,2.78,2.78,0,0,1,.56.17,3.2,3.2,0,0,1,.52.27,3.32,3.32,0,0,1,.46.38,4,4,0,0,1,.37.45,2.86,2.86,0,0,1,.27.52,2.81,2.81,0,0,1,.18.56,3,3,0,0,1,.06.59,3.06,3.06,0,0,1-.88,2.12,3.22,3.22,0,0,1-1,.65,3.62,3.62,0,0,1-.56.17A2.86,2.86,0,0,1,59,11.65Z\"/>\n <path class=\"cls-2\" d=\"M46.14,11.65a3,3,0,0,1-3-3,3.92,3.92,0,0,1,0-.59,2.81,2.81,0,0,1,.18-.56A2.86,2.86,0,0,1,43.64,7,3.23,3.23,0,0,1,44,6.53a2.74,2.74,0,0,1,.45-.38A3.2,3.2,0,0,1,45,5.88a2.78,2.78,0,0,1,.56-.17,2.88,2.88,0,0,1,1.17,0,2.78,2.78,0,0,1,.56.17,3.2,3.2,0,0,1,.52.27,2.82,2.82,0,0,1,.46.38,3.16,3.16,0,0,1,.37.45,3.74,3.74,0,0,1,.28.52,3.62,3.62,0,0,1,.17.56,2.93,2.93,0,0,1,0,1.18,3.62,3.62,0,0,1-.17.56,3.15,3.15,0,0,1-.28.51,2.74,2.74,0,0,1-.83.83,3.25,3.25,0,0,1-.52.28,3.62,3.62,0,0,1-.56.17A2.86,2.86,0,0,1,46.14,11.65Z\"/>\n <path class=\"cls-2\" d=\"M59,28.73a3.07,3.07,0,0,1-2.13-.87,3.22,3.22,0,0,1-.65-1,3.62,3.62,0,0,1-.17-.56,2.88,2.88,0,0,1,0-1.17,3.62,3.62,0,0,1,.17-.56,3.22,3.22,0,0,1,.65-1,3.13,3.13,0,0,1,4.25,0,4.14,4.14,0,0,1,.37.46,3.25,3.25,0,0,1,.28.52,3.62,3.62,0,0,1,.17.56,2.88,2.88,0,0,1,0,1.17,3.62,3.62,0,0,1-.17.56,3.25,3.25,0,0,1-.28.52,4.14,4.14,0,0,1-.37.46A3.07,3.07,0,0,1,59,28.73Z\"/>\n <path class=\"cls-2\" d=\"M7.71,28.74a3,3,0,0,1,0-6H46.14a3,3,0,0,1,0,6Z\"/>\n <path class=\"cls-2\" d=\"M58.94,45.81H33.33a3,3,0,0,1,0-6H58.94a3,3,0,0,1,0,6Z\"/>\n <path class=\"cls-2\" d=\"M7.71,11.66a3,3,0,0,1-.59-.06,3.62,3.62,0,0,1-.56-.17,3.15,3.15,0,0,1-.51-.28,2.76,2.76,0,0,1-.46-.37,3,3,0,0,1-.88-2.12,2.88,2.88,0,0,1,.06-.59,3.62,3.62,0,0,1,.17-.56A3.25,3.25,0,0,1,5.22,7a2.69,2.69,0,0,1,.37-.45,2.82,2.82,0,0,1,.46-.38,2.49,2.49,0,0,1,.51-.27,2.78,2.78,0,0,1,.56-.17,2.93,2.93,0,0,1,1.18,0,2.78,2.78,0,0,1,.56.17,2.86,2.86,0,0,1,.52.27,3.23,3.23,0,0,1,.45.38,2.74,2.74,0,0,1,.38.45,3.2,3.2,0,0,1,.27.52,2.78,2.78,0,0,1,.17.56,2.88,2.88,0,0,1,0,1.17,2.6,2.6,0,0,1-.17.56,2.8,2.8,0,0,1-.65,1,3.16,3.16,0,0,1-.45.37,3.74,3.74,0,0,1-.52.28,3.62,3.62,0,0,1-.56.17A3,3,0,0,1,7.71,11.66Z\"/>\n <path class=\"cls-2\" d=\"M33.33,11.66H20.52a3,3,0,0,1,0-6H33.33a3,3,0,0,1,0,6Z\"/>\n <path class=\"cls-2\" d=\"M12,62.89H7.71a3,3,0,1,1,0-6H12a3,3,0,1,1,0,6Z\"/>\n <path class=\"cls-2\" d=\"M41.87,62.89H24.79a3,3,0,0,1,0-6H41.87a3,3,0,0,1,0,6Z\"/>\n <path class=\"cls-2\" d=\"M20.52,45.81a3,3,0,0,1-2.13-.88,4,4,0,0,1-.37-.45,2.86,2.86,0,0,1-.27-.52,2.81,2.81,0,0,1-.18-.56,3.92,3.92,0,0,1-.05-.59,3.79,3.79,0,0,1,.05-.58,2.9,2.9,0,0,1,.18-.57,2.49,2.49,0,0,1,.27-.51,3.38,3.38,0,0,1,.37-.46,3,3,0,0,1,2.71-.82,3.62,3.62,0,0,1,.56.17,3.22,3.22,0,0,1,1,.65,2.76,2.76,0,0,1,.37.46,3.15,3.15,0,0,1,.28.51,3.74,3.74,0,0,1,.17.57,2.86,2.86,0,0,1,.06.58,3,3,0,0,1-.06.59,3.62,3.62,0,0,1-.17.56,3.74,3.74,0,0,1-.28.52,3.16,3.16,0,0,1-.37.45,3.32,3.32,0,0,1-.46.38,3.2,3.2,0,0,1-.52.27,2.78,2.78,0,0,1-.56.17A2.86,2.86,0,0,1,20.52,45.81Z\"/>\n <path class=\"cls-2\" d=\"M7.71,45.81a3,3,0,0,1-2.12-.88,3.16,3.16,0,0,1-.37-.45A3.74,3.74,0,0,1,4.94,44a3.62,3.62,0,0,1-.17-.56,3,3,0,0,1-.06-.59,2.86,2.86,0,0,1,.06-.58,3.74,3.74,0,0,1,.17-.57,3.15,3.15,0,0,1,.28-.51,2.76,2.76,0,0,1,.37-.46,3,3,0,0,1,2.71-.82,3.62,3.62,0,0,1,.56.17,3.74,3.74,0,0,1,.52.28,3.16,3.16,0,0,1,.45.37,2.82,2.82,0,0,1,.38.46,3.1,3.1,0,0,1,.27.51,3.16,3.16,0,0,1,.23,1.15,3,3,0,0,1-.06.59,2.78,2.78,0,0,1-.17.56,3.67,3.67,0,0,1-.27.52,3.5,3.5,0,0,1-.83.83,3.67,3.67,0,0,1-.52.27,2.78,2.78,0,0,1-.56.17A3,3,0,0,1,7.71,45.81Z\"/>\n <path class=\"cls-2\" d=\"M58.94,62.89H54.67a3,3,0,0,1,0-6h4.27a3,3,0,0,1,0,6Z\"/>\n </g>\n</svg>\n", "preview_collection_label": "Previews", "preview_nav_filter": true, "preview_paths": [ "app/components/previews" ], "preview_display_options": { "theme": [ "light", "dark" ] }, "preview_controller": "Lookbook::PreviewController", "preview_template": "lookbook/previews/preview", "preview_inspector": { "main_panels": [ "preview", "output" ], "drawer_panels": [ "source", "notes", "params", "*" ], "sidebar_panels": [ "previews", "pages" ] }, "preview_embeds": { "enabled": true, "policy": "SAMEORIGIN", "panels": false, "actions": [ ], "scenarios": [ ], "display_option_controls": true }, "preview_layout": null, "preview_disable_action_view_annotations": true, "preview_disable_action_view_partial_prefixes": true, "preview_type_default": "view_component", "preview_sort_scenarios": false, "preview_disable_error_handling": false, "page_collection_label": "Pages", "page_nav_filter": true, "page_controller": "Lookbook::PageController", "page_route": "pages", "page_paths": [ "test/components/docs" ], "page_extensions": [ "html.*", "md.*" ], "page_options": { }, "markdown_options": { "tables": true, "fenced_code_blocks": true, "disable_indented_code_blocks": true, "strikethrough": true, "highlight": true, "with_toc_data": true, "lax_spacing": true }, "highlighter_options": { "theme": "github", "dark": false }, "component_paths": [ "app/views", "app/components" ], "reload_on_change": false, "live_updates": false, "listen_paths": [ ], "listen_extensions": [ "rb", "html.*" ], "autoload_previews": true, "ui_theme": "green", "ui_theme_overrides": { }, "ui_favicon": true, "log_level": 2, "log_use_rails_logger": true, "debug_menu": true, "links": { "docs": "https://v2.lookbook.build", "demo": "https://v2-demo.lookbook.build", "repo": "https://github.com/lookbook-hq/lookbook/tree/v2" }, "using_view_component": false, "default_preview_layout": "application", "dependencies": { "actioncable": true, "listen": false, "view_component": false }, "panels": { "css": { "label": "CSS", "hotkey": null, "disabled": false, "show": true, "copy": null, "locals": "#<Proc:0x00007f7d1cc25538 /app/config/initializers/lookbook.rb:24 (lambda)>", "partial": "panels/assets", "name": "css" }, "js": { "label": "JS", "hotkey": null, "disabled": false, "show": true, "copy": null, "locals": "#<Proc:0x00007f7d1c7a65e8 /app/config/initializers/lookbook.rb:24 (lambda)>", "partial": "panels/assets", "name": "js" } }, "inputs": { }, "tags": { } } }

No matching results.

No matching results.

Embed Code

Embed URL