x
1
2
3
<span class="lui-counter lui-counter--tinny" style="color: #ffffff; background-color: #c81720;"> <span class="lui-counter__text">3</span></span>Counter
Description
Related components
| Used Components | Components where is Used |
|---|---|
| Label |
Usage rules
- ✅ Do
- ❌ Don't
1
<%= render LooposUi::Counter.new(kind: params[:kind] || :danger , count: params[:count] || "3", size: params[:size] || "tinny", increment: params[:increment] || false ) %>No notes provided.
| Param | Description | Input |
|---|---|---|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|
LooposUi::Counter Component
Description
The LooposUi::Counter component is part of the LooposUi module. It is used to display a numeric count with different color styles depending on the context or type (e.g., success, danger, warning, etc.). This component is useful for showing counts in a visually distinctive way, such as for notifications or status indicators.
Arguments
| Property | Default | Description |
|---|---|---|
count |
nil |
The number to be displayed inside the counter. |
kind |
nil |
The style of the counter, which determines the text and background color. Options are success, danger, warning, neutral, and informative. |
size |
"tinny" "small" |
The size of the counter text. |
increment |
false |
A boolean. When set to true, allows an empty kind (used for lists with the plus). |
Styling
The LooposUi::Counter component applies styles based on the kind argument
If an invalid kind is provided and increment is false, the component raises an error.
Usage Example
To use the LooposUi::Counter in your view, pass the desired arguments to control its appearance:
<%= render LooposUi::Counter.new(count: 10, kind: :success) %>