View Source ZoonkWeb.Components.Button (Zoonk v0.1.0-alpha)

Button components.

Link to this section Summary

Functions

Renders a button.

Renders a button with an icon only.

Renders a button with a transparent background.

Link to this section Functions

Renders a button.

examples

Examples

<.button>Send!</.button>
<.button phx-click="go" class="ml-2">Send!</.button>

attributes

Attributes

  • color (:atom) - the background color. Defaults to :black.
  • icon (:string) (required) - name of the icon to add to the button.
  • class (:string) - the optional additional classes to add to the button element. Defaults to nil. Global attributes are accepted.

slots

Slots

  • inner_block (required) - the inner block that renders the button content.

Renders a button with an icon only.

examples

Examples

<.icon_button icon="tabler-x" label="Remove" color={:alert} />
<.icon_button icon="tabler-add" label="Add" phx-click="add" />

attributes

Attributes

  • icon (:string) (required) - name of the icon to add to the button.
  • label (:string) (required) - the button's label for screen readers.
  • color (:atom) - the background color. Defaults to :black.
  • size (:atom) - the button size. Defaults to :lg. Global attributes are accepted.
Link to this function

transparent_button(assigns)

View Source

Renders a button with a transparent background.

examples

Examples

<.transparent_button icon="tabler-x" color={:alert} phx-click="remove">Remove</.transparent_button>

attributes

Attributes

  • icon (:string) (required) - name of the icon to add to the button.
  • color (:atom) - the background color. Defaults to :info. Global attributes are accepted.

slots

Slots

  • inner_block (required) - the inner block that renders the button content.