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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<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 relative" data-controller="lui--button"> <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon"> <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-plus-large" data-lui--button-target="leadingIcon"></i></div> </div> <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text"> Text </span> <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon"> <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 16px;"> progress_activity </i> </div> </button> <button class="lui-button lui-button--neutral--primary lui-button--size-default w-fit w-fit relative" data-controller="lui--button"> <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon"> <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-plus-large" data-lui--button-target="leadingIcon"></i></div> </div> <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text"> Text </span> <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon"> <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 16px;"> progress_activity </i> </div> </button> <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button"> <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon"> <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-plus-large" data-lui--button-target="leadingIcon"></i></div> </div> <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text"> Text </span> <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon"> <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 16px;"> progress_activity </i> </div> </button> <button class="lui-button lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button"> <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon"> <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-plus-large" data-lui--button-target="leadingIcon"></i></div> </div> <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text"> Text </span> <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon"> <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 16px;"> progress_activity </i> </div> </button> </div> <div class="lui-action_buttons__button-group"> <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button"> <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon"> <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-play-pause" data-lui--button-target="leadingIcon"></i></div> </div> <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon"> <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 16px;"> progress_activity </i> </div> </button> <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button"> <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon"> <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-heart" data-lui--button-target="leadingIcon"></i></div> </div> <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon"> <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 16px;"> progress_activity </i> </div> </button> <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button"> <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon"> <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-copy" data-lui--button-target="leadingIcon"></i></div> </div> <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon"> <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 16px;"> progress_activity </i> </div> </button> <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button"> <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon"> <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-gear" data-lui--button-target="leadingIcon"></i></div> </div> <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon"> <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 16px;"> progress_activity </i> </div> </button> <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-default w-fit w-fit relative" data-controller="lui--button"> <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon"> <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-trash" data-lui--button-target="leadingIcon"></i></div> </div> <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon"> <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 16px;"> progress_activity </i> </div> </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.