<!-- Default (primary) -->
<button class="primary">
Primary button
</button>
<!-- Secondary -->
<button class="secondary">
Secondary button
</button>
<!-- Contrast -->
<button class="contrast">
Contrast button
</button>
Default (primary)
A primary button. Use for the most important actions on the page.
render Elements::ButtonComponent.new(variant: :primary) do
"Primary button"
end
Secondary
A button for less important actions.
render Elements::ButtonComponent.new(variant: :secondary) do
"Secondary button"
end
Contrast
Useful for displaying over images or wherever a higher-contrast button option is required.
render Elements::ButtonComponent.new(variant: :contrast) do
"Contrast button"
end
No params configured.
| Name | Value |
|---|---|
| UUID | be4417
|
| Permalink | /lookbook/@be4417
|
| Preview file path | lookbook/previews/elements/button_component_preview.rb
|