RapidRails UI Book
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="space-y-4">
<div class="p-4 rounded border">
  <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Badge Preview</h3>
  <span class="badge badge-default rounded-md badge-small" role="status" aria-label="Badge Text">
    <span>Badge Text</span>
  </span>
</div>
<div class="p-4 mt-4 text-gray-800 bg-white rounded-lg shadow">
  <h3 class="mb-2 text-lg font-semibold">Component Parameters:</h3>
  <ul class="list-disc list-inside">
    <li>Text: Badge Text</li>
    <li>Status: default</li>
    <li>URL: </li>
    <li>Close Button: false</li>
    <li>Dismissible: false</li>
    <li>Counter: </li>
    <li>Pulsing: false</li>
    <li>Outline: false</li>
    <li>Size: small</li>
  </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="space-y-4">
  <div class="p-4 rounded border">
    <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Badge Preview</h3>
    <%= rui_badge(
      text: text,
      status: status,
      size: size,
      close_button: close_button,
      dismissible: dismissible,
      counter: counter,
      pulsing: pulsing,
      url: url,
      outline: outline
    ) %>
  </div>
<div class="p-4 mt-4 text-gray-800 bg-white rounded-lg shadow">
  <h3 class="mb-2 text-lg font-semibold">Component Parameters:</h3>
  <ul class="list-disc list-inside">
    <li>Text: <%= text %></li>
    <li>Status: <%= status %></li>
    <li>URL: <%= url %></li>
    <li>Close Button: <%= close_button %></li>
    <li>Dismissible: <%= dismissible %></li>
    <li>Counter: <%= counter %></li>
    <li>Pulsing: <%= pulsing %></li>
    <li>Outline: <%= outline %></li>
    <li>Size: <%= size %></li>
  </ul>
</div>

🎉 Badge Component Playground! 🎉

Welcome to the playground! Here you can experiment with different configurations to see how your badges will look and behave.

How to Use:

  1. Use the controls in the 'Params' section to customize your badge.
  2. Watch the preview update in real-time as you make changes.
  3. Experiment with different combinations to find what works best for your app!

Tips:

  • Try different statuses to see how the badge appearance changes.
  • Toggle the close button or dismissible options to see how they affect the badge.
  • Add an icon or counter to see how they integrate with the badge text.

Component Usage:

In your Rails views, you can use the badge component like this:

<%= rui_badge(text: "Default", status: :success) %>

or with an icon:

<%= rui_badge(status: :warning, text: "Default Badge" ) do |badge| %>
<% badge.with_icon(color: :warning, name: "info")%>
<% end %>
Param Description Input

Badge text

Badge status

Text size

Show close button?

Make dismissible?

Counter value (optional)

Enable pulsing effect?

Enter Badge URL

Enable outline?