Buttons
Buttons empower you to create interactive elements for a user.
Types
<.button label="Button" to="/" />
<.button link_type="a" to="/" label="Link" />
<.button link_type="a" to="/" label="Link with method" method={:delete} />
<.button link_type="live_patch" to="/" label="Live Patch" />
<.button link_type="live_redirect" to="/" label="Live Redirect" />
Colors
<.button color="primary" label="Primary" />
<.button color="secondary" label="Secondary" />
<.button color="white" label="White" />
<.button color="pure_white" label="Pure White" />
<.button color="info" label="Info" />
<.button color="success" label="Success" />
<.button color="warning" label="Warning" />
<.button color="danger" label="Danger" />
<.button color="gray" label="Gray" />
Outline
<.button color="primary" label="Primary" variant="outline" />
<.button color="secondary" label="Secondary" variant="outline" />
<.button color="white" label="White" variant="outline" />
<.button color="info" label="Info" variant="outline" />
<.button color="success" label="Success" variant="outline" />
<.button color="warning" label="Warning" variant="outline" />
<.button color="danger" label="Danger" variant="outline" />
<.button color="gray" label="Gray" variant="outline" />
Shadow
<.button color="primary" label="Primary" variant="shadow" />
<.button color="secondary" label="Secondary" variant="shadow" />
<.button color="white" label="White" variant="shadow" />
<.button color="info" label="Info" variant="shadow" />
<.button color="success" label="Success" variant="shadow" />
<.button color="warning" label="Warning" variant="shadow" />
<.button color="danger" label="Danger" variant="shadow" />
<.button color="gray" label="Gray" variant="shadow" />
Sizes
<.button size="xs" label="xs" />
<.button size="sm" label="sm" />
<.button size="md" label="md" />
<.button size="lg" label="lg" />
<.button size="xl" label="xl" />
States
Disabled
<.button disabled size="xs" to="/" label="Disabled xs" />
<.button disabled size="sm" to="/" label="Disabled sm" />
<.button disabled size="md" to="/" label="Disabled md" />
<.button disabled size="lg" to="/" label="Disabled lg" />
<.button disabled size="xl" to="/" label="Disabled xl" />
Loading
<.button loading size="xs" label="Loading xs" />
<.button loading size="sm" label="Loading sm" />
<.button loading size="md" label="Loading md" />
<.button loading size="lg" label="Loading lg" />
<.button loading size="xl" label="Loading xl" />
With icon
<.button icon link_type="a" to="/">
<Heroicons.Solid.home class="w-5 h-5" />
With icon
</.button>
Icon buttons
<.icon_button to="/" link_type="button" size="xs" color="primary" icon={:clock} />
<.icon_button to="/" link_type="button" size="sm" color="secondary" icon={:clock} />
<.icon_button to="/" link_type="button" size="md" color="gray" icon={:clock} />
<.icon_button to="/" link_type="button" size="md" color="info" icon={:trash} />
<.icon_button to="/" link_type="button" size="lg" color="success" icon={:trash} />
<.icon_button to="/" link_type="button" size="lg" color="warning" icon={:arrow_circle_up} />
<.icon_button to="/" link_type="button" size="xl" color="danger" icon={:arrow_circle_up} />
<.icon_button to="/" disabled link_type="button" size="lg" icon={:save} class="!text-green-600" />
<.icon_button to="/" disabled loading link_type="button" size="xl" icon={:trash} class="!text-indigo-600 !dark:text-indigo-300" />
Properties
Defaults are indicated in bold.
Name | Type | Options |
---|---|---|
label | :string | - |
link_type | :string |
button
, `a`, `live_patch`, `live_redirect`
|
size | :string |
`xs`, `sm`, md
, `lg`, `xl`
|
variant | :string | `outline`, `shadow` |
color | :string |
`primary`, `secondary`, `white`, `pure_white`,`info`, `success`, `warning`, `danger`, `gray`
*pure_white only available for basic variant |
loading | :boolean | `true`, false |
icon | :boolean | `true`, false |
icon | :string | - |
disabled | :boolean | `true`, false |
inner_block | :slot | - |