Lookbook Demo
x
1
2
3
<button type="button" class="button button-danger">
  Click me
</button>
1
2
3
render Elements::ButtonComponent.new(theme: theme, arrow: arrow) do
  text
end

🎉 Button playground! 🎉

You can use the controls in the 'Params' section to set button property values on the fly.

Param Description Input

Content of button

The button action type

Show the arrow?

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