Lookbook Demo
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

No notes provided.

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');
  })
})