Button

Renders a button.

Read more Read less

Use this component when you need to perform an action such as submitting a form, confirming an action, deleting an item, toggling a setting, etc.

If you need to navigate to a different page or a specific section on the current page and want to style the link like a button, use button_link/1 instead.

See also button_link/1, toggle_button/1, and disclosure_button/1.

Usage

<.button>Confirm</.button>

<.button type=”submit”> Submit </.button>

To indicate a loading state, for example when submitting a form, use the aria-busy attribute:

<.button aria-label="Saving..." aria-busy>
  click me
</.button>
Attribute Type Documentation Default Value
class :any Any additional classes to be added. Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings. []
disabled :boolean
fill :string "solid"
rest :global
shape :string
size :string "normal"
type :string "button"
variant :string "primary"
Required inner_block * :slot
[Multiple values]