LoopOS UI v1.1.26.2

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div class="lui-action_buttons">
  <div class="lui-action_buttons__button-group">
    <button class="lui-button lui-button--neutral--primary lui-button--size-default w-fit w-fit" data-controller="lui--button">
      <i class="lui-button__icon lui-button__icon--default fa-regular fa-plus-large" data-lui--button-target="leadingIcon"></i>
      <span class="lui-button__text" data-lui--button-target="text">
        Text
      </span>
    </button>
    <button class="lui-button lui-button--neutral--primary lui-button--size-default w-fit w-fit" data-controller="lui--button">
      <i class="lui-button__icon lui-button__icon--default fa-regular fa-plus-large" data-lui--button-target="leadingIcon"></i>
      <span class="lui-button__text" data-lui--button-target="text">
        Text
      </span>
    </button>
    <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
      <i class="lui-button__icon lui-button__icon--default fa-regular fa-plus-large" data-lui--button-target="leadingIcon"></i>
      <span class="lui-button__text" data-lui--button-target="text">
        Text
      </span>
    </button>
    <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
      <i class="lui-button__icon lui-button__icon--default fa-regular fa-plus-large" data-lui--button-target="leadingIcon"></i>
      <span class="lui-button__text" data-lui--button-target="text">
        Text
      </span>
    </button>
  </div>
  <div class="lui-action_buttons__button-group">
    <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
      <i class="lui-button__icon lui-button__icon--default fa-regular fa-play-pause" data-lui--button-target="leadingIcon"></i>
    </button>
    <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
      <i class="lui-button__icon lui-button__icon--default fa-regular fa-heart" data-lui--button-target="leadingIcon"></i>
    </button>
    <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
      <i class="lui-button__icon lui-button__icon--default fa-regular fa-copy" data-lui--button-target="leadingIcon"></i>
    </button>
    <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
      <i class="lui-button__icon lui-button__icon--default fa-regular fa-gear" data-lui--button-target="leadingIcon"></i>
    </button>
    <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit" data-controller="lui--button">
      <i class="lui-button__icon lui-button__icon--default fa-regular fa-trash" data-lui--button-target="leadingIcon"></i>
    </button>
  </div>
</div>

No Usage documentation to display.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<% attrs = {size: :default, type: :secondary, kind: :neutral } %>
<%= render LooposUi::ActionButtons.new do |c| %>
    <% c.with_button_group do |g| %>
        <% g.with_button(leading_icon: "fa-regular fa-plus-large", text: "Text", **attrs, type: :primary) %>
        <% g.with_button(leading_icon: "fa-regular fa-plus-large", text: "Text", **attrs, type: :primary) %>
        <% g.with_button(leading_icon: "fa-regular fa-plus-large", text: "Text", **attrs) %>
        <% g.with_button(leading_icon: "fa-regular fa-plus-large", text: "Text", **attrs) %>
    <% end %>
    <% c.with_button_group do |g| %>
        <% g.with_button(leading_icon: "fa-regular fa-play-pause", **attrs) %>
        <% g.with_button(leading_icon: "fa-regular fa-heart", **attrs) %>
        <% g.with_button(leading_icon: "fa-regular fa-copy", **attrs) %>
        <% g.with_button(leading_icon: "fa-regular fa-gear", **attrs) %>
        <% g.with_button(leading_icon: "fa-regular fa-trash", **attrs) %>
    <% end %>
<% end %>

No notes provided.

No params configured.

Description

The ActionButtons component is a container for buttons that can be used to trigger actions or navigate to different parts of the application.

Slots

ButtonGroup components can be passed in as slots to the ActionButtons component. These will be separated by a divider. The ButtonGroup component accepts a buttons slots.