LoopOS UI v1.1.29.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="space-y-4">
  <div>
    <p class="text-sm font-medium mb-2">Small</p>
    <button type="button" class="lui-filter_pill lui-filter_pill--small lui-filter_pill--enabled">
      <span class="lui-filter_pill__label">
        Small
      </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>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Medium</p>
    <button type="button" class="lui-filter_pill lui-filter_pill--medium lui-filter_pill--enabled">
      <span class="lui-filter_pill__label">
        Medium
      </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>
  </div>
</div>

FilterPill

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
8
9
10
11
<div class="space-y-4">
  <div>
    <p class="text-sm font-medium mb-2">Small</p>
    <%= render LooposUi::FilterPill.new(text: "Small", size: :small) %>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Medium</p>
    <%= render LooposUi::FilterPill.new(text: "Medium", size: :medium) %>
  </div>
</div>

No notes provided.

No params configured.

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.