x
1
2
3
4
5
6
7
8
<button type="button" class="lui-filter_pill lui-filter_pill--medium lui-filter_pill--enabled"> <span class="lui-filter_pill__label"> Todos </span> <i class="lui-m_icon lui-filter_pill__close material-symbols-outlined" style="--lui-micon-size: 16px;" data-action="click->lui--filter-pills#removePill" onclick="event.preventDefault(); event.stopPropagation();"> close </i></button>FilterPill
Description
Related components
| Used Components | Components where is Used |
|---|---|
| Label |
Usage rules
- ✅ Do
- ❌ Don't
1
2
3
4
5
6
7
8
render( LooposUi::FilterPill.new( text: text, state: state, hasCloseButton: hasCloseButton, count: count ))No notes provided.
| Param | Description | Input |
|---|---|---|
|
Label |
|
|
|
— |
|
|
|
Show close button |
|
|
|
Counter value |
|
Description
FilterPill is used to represent applicable filters in listings and searches, in a compact pill format.
Arguments
| Property | Default | Required | Description |
|---|---|---|---|
text |
- | X | Main text displayed in the pill |
size |
:medium |
- | Size of the pill (:small, :medium) |
state |
:enabled |
- | Visual state (:enabled, :focus, :active, :state2) |
selected |
false |
- | Indicates if the filter is selected |
count |
nil |
- | Optional counter displayed next to the text |
hasCloseButton |
true |
- | Shows (true) or hides (false) the close button/icon (X) |
When count is provided and greater than zero, a small numeric badge is rendered to the right of the text.
By default, the component shows a small close button (X); to hide it, pass hasCloseButton: false.
Slots
No slots available at the moment.
JS Events
No specific JS events. The component is rendered as a standard button and can be combined with Stimulus controllers as needed.