x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- Primary (default) -->
<button type="button" class="button ">
A primary action
</button>
<!-- Secondary -->
<button type="button" class="button button-secondary">
A less important action
</button>
<!-- Danger -->
<button type="button" class="button button-danger">
A dangerous action
</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Primary (default)
render Elements::ButtonComponent.new do
text
end
# Secondary
render Elements::ButtonComponent.new(theme: :secondary) do
"A less important action"
end
# Danger
render Elements::ButtonComponent.new(theme: :danger) do
"A dangerous action"
end
Param Description Input

This is a custom panel! See the documentation for details on how to add custom panels to your Lookbook instance.

button_component.css

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
@layer components {
.button {
@apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white focus:outline-none focus:ring-2 focus:ring-offset-2;
@apply bg-green-600 hover:bg-green-700 focus:ring-green-500;
}
.button.button-danger {
@apply bg-red-600 hover:bg-red-700 focus:ring-red-500;
}
.button.button-secondary {
@apply bg-gray-500 hover:bg-gray-600 focus:ring-gray-400;
}
[data-theme="dark"] .button {
@apply bg-green-300 text-black;
}
[data-theme="dark"] .button-danger {
@apply bg-red-200;
}
[data-theme="dark"] .button-secondary {
@apply bg-gray-200;
}
}

button_component.js

1
2
3
4
5
Array.from(document.querySelectorAll("button")).forEach((button) => {
button.addEventListener("click", () => {
console.log('Button clicked');
})
})