LoopOS UI v1.1.29.0-release.2025.q4.uxe.december.rc1

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
25
26
<div class="flex flex-col gap-4">
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Large:</span>
    <button class="lui-filter_button lui-filter_button--large lui-filter_button--enabled" data-controller="lui--filter-button" type="button">
      <span class="lui-filter_button__text">
        Filter
      </span>
    </button>
  </div>
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Medium:</span>
    <button class="lui-filter_button lui-filter_button--medium lui-filter_button--enabled" data-controller="lui--filter-button" type="button">
      <span class="lui-filter_button__text">
        Filter
      </span>
    </button>
  </div>
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Small:</span>
    <button class="lui-filter_button lui-filter_button--small lui-filter_button--enabled" data-controller="lui--filter-button" type="button">
      <span class="lui-filter_button__text">
        Filter
      </span>
    </button>
  </div>
</div>

FilterButton

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="flex flex-col gap-4">
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Large:</span>
    <%= render LooposUi::FilterButton.new(text: "Filter", size: :large) %>
  </div>
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Medium:</span>
    <%= render LooposUi::FilterButton.new(text: "Filter", size: :medium) %>
  </div>
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Small:</span>
    <%= render LooposUi::FilterButton.new(text: "Filter", size: :small) %>
  </div>
</div>

No notes provided.

No params configured.

Description

FilterButton is a specialized button component designed for filter interfaces. It supports icons, counters, notifications, and various visual states. It's commonly used within the FilterBar component to provide interactive filter controls.

Arguments

Property Default Required Description
text nil - Text displayed on the button
size :medium - Size of the button (:large, :medium, :small)
state :enabled - Visual state (:enabled, :hover, :active, :loading, :focus, :disabled)
isSelected false - Indicates if the button is in a selected state
showNotification false - Shows a notification indicator on the button
showRightIcon false - Controls visibility of the right icon slot
showLeftIcon false - Controls visibility of the left icon slot
showCounter false - Controls visibility of the counter badge
counter_kind :neutral - Counter appearance kind (:success, :danger, :warning, :neutral, :informative)
left_icon nil - Icon to display on the left side. Can be an app icon name or FontAwesome icon class
right_icon nil - Icon to display on the right side. Can be an app icon name or FontAwesome icon class
count nil - Numeric value to display in the counter badge
href nil - If provided, the button will be rendered as an anchor tag instead of a button
tag nil - HTML tag to use (:button, :a, etc.). Defaults to :button or :a if href is present
tag_options {} - Hash of additional options to pass to the tag builder (e.g., data attributes, class, etc.)

Icon Support

The component supports two types of icons:

  1. App Icons: When left_icon or right_icon is one of the app icon names ("core", "manager", "submission", "hubs", "validation", "handling", "exits", "impact", "submission_extra"), the respective app icon will be rendered.

  2. FontAwesome Icons: When using MIcon compatible icons or FontAwesome classes (e.g., "fa-regular fa-info"), the icon will be rendered accordingly.

  3. Custom Icons: You can also pass custom icon classes that will be applied directly.

States

  • :enabled - Default state, button is interactive
  • :hover - Hover state (typically handled by CSS)
  • :active - Active/pressed state
  • :loading - Loading state
  • :focus - Focused state
  • :disabled - Disabled state, button is not interactive

Counter

When showCounter is true and count is provided and greater than zero, a counter badge is displayed. The counter_kind property controls the visual appearance of the counter.

Slots

left_icon

Renders an icon on the left side of the button:

<%= render LooposUi::FilterButton.new(text: "Filter") do |button| %>
  <% button.with_left_icon(icon: "info") %>
<% end %>

Slot attributes:

  • icon - Icon name or class (required)
  • Additional kwargs are passed to the icon component

right_icon

Renders an icon on the right side of the button:

<%= render LooposUi::FilterButton.new(text: "Filter") do |button| %>
  <% button.with_right_icon(icon: "chevron-down") %>
<% end %>

Slot attributes:

  • icon - Icon name or class (required)
  • Additional kwargs are passed to the icon component

JavaScript/Stimulus Controller

The FilterButton component includes a Stimulus controller (lui--filter-button) that provides dynamic functionality for button interactions.

Controller Behavior

The controller automatically handles:

  • Button state management
  • Integration with FilterBar component
  • Form submission handling when used within filter forms

Integration with FilterBar

When used within a FilterBar component, the FilterButton automatically:

  • Gets click handlers attached by the FilterBar controller
  • Manages selection state based on form inputs
  • Dispatches filter:toggle events when clicked

Usage Examples

Basic Filter Button

<%= render LooposUi::FilterButton.new(
  text: "Filter",
  size: :medium,
  state: :enabled
) %>

Button with Icon and Counter

<%= render LooposUi::FilterButton.new(
  text: "Issues",
  showLeftIcon: true,
  left_icon: "info",
  showCounter: true,
  count: 3,
  counter_kind: :danger
) %>

Selected Button

<%= render LooposUi::FilterButton.new(
  text: "Messages",
  isSelected: true,
  showCounter: true,
  count: 10
) %>
<%= render LooposUi::FilterButton.new(
  text: "Advanced Filters",
  href: "/advanced_filters",
  showRightIcon: true,
  right_icon: "chevron-right"
) %>

Button with Custom Data Attributes

<%= render LooposUi::FilterButton.new(
  text: "Filter",
  tag_options: {
    name: "only_issues",
    data: {
      action: "click->custom#handleFilter",
      filter_name: "only_issues"
    }
  }
) %>

Using Slots

<%= render LooposUi::FilterButton.new(text: "Filter") do |button| %>
  <% button.with_left_icon(icon: "info") %>
  <% button.with_right_icon(icon: "chevron-down") %>
<% end %>