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" />

          
Inverted
            <.button color="primary" label="Primary" variant="inverted" />
<.button color="secondary" label="Secondary" variant="inverted" />
<.button color="white" label="White" variant="inverted" />
<.button color="info" label="Info" variant="inverted" />
<.button color="success" label="Success" variant="inverted" />
<.button color="warning" label="Warning" variant="inverted" />
<.button color="danger" label="Danger" variant="inverted" />
<.button color="gray" label="Gray" variant="inverted" />

          
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="/">
  <HeroiconsV1.Solid.home class="w-5 h-5" />
  With icon
</.button>

          
Icon buttons
            <.icon_button to="/" link_type="button" size="xs" color="primary">
  <Heroicons.clock solid class={PetalComponents.Button.get_icon_button_size_classes("xs")}/>
</.icon_button>
<.icon_button to="/" link_type="button" size="xs" color="secondary">
  <Heroicons.clock solid class={PetalComponents.Button.get_icon_button_size_classes("sm")}/>
</.icon_button>
<.icon_button to="/" link_type="button" size="xs" color="gray">
  <Heroicons.clock solid class={PetalComponents.Button.get_icon_button_size_classes("md")}/>
</.icon_button>
<.icon_button to="/" link_type="button" size="xs" color="info">
  <Heroicons.trash solid class={PetalComponents.Button.get_icon_button_size_classes("md")}/>
</.icon_button>
<.icon_button to="/" link_type="button" size="xs" color="success">
  <Heroicons.trash solid class={PetalComponents.Button.get_icon_button_size_classes("lg")}/>
</.icon_button>
<.icon_button to="/" link_type="button" size="xs" color="warning">
  <Heroicons.arrow_up_circle solid class={PetalComponents.Button.get_icon_button_size_classes("lg")}/>
</.icon_button>
<.icon_button to="/" link_type="button" size="xs" color="danger">
  <Heroicons.arrow_up_circle solid class={PetalComponents.Button.get_icon_button_size_classes("xl")}/>
</.icon_button>
<.icon_button
  to="/"
  disabled
  link_type="button"
  class="!text-green-600"
>
  <Heroicons.arrow_down_on_square solid class={PetalComponents.Button.get_icon_button_size_classes("lg")}/>
</.icon_button>

<.icon_button
  to="/"
  disabled
  loading
  link_type="button"
  class="!text-indigo-600 !dark:text-indigo-300"
>
    <Heroicons.trash solid class={PetalComponents.Button.get_icon_button_size_classes("xl")}/>
</.icon_button>

          
Properties

Defaults are indicated in bold.

Name Type Options
link_type :string button , `a`, `live_patch`, `live_redirect`
size :string `xs`, `sm`, md , `lg`, `xl`
variant :string `outline`, `inverted`, `shadow`
color :string `primary`, `secondary`, `white`, `pure_white`,`info`, `success`, `warning`, `danger`, `gray`

*pure_white only available for basic variant
loading :boolean `true`, false
disabled :boolean `true`, false
inner_block :slot (put your icon here)