Elemental.Actions.Button (elemental v0.3.0)

A simple button element with support for "links"

Usage

<.button type="submit">A button</.button>
<.button href="example.org">A button looking link</.button>
<.button navigate={~p"/live/navigate"}>A button looking link</.button>
<.button patch={~p"/live/patch"}>A button looking link</.button>

Caveats

Underlying implementation from Phoenix doesn't pass role attribute so from an accessibility POV it may not be very ideal to use links disguised as buttons.

Summary

Functions

The primary button component.

Functions

button(assigns)

The primary button component.

This can also be used with links that require to appear as buttons by delegating over to Phoenix.Component.link/1 while retaining it's general style.

Attributes

  • color (:string) - .Must be one of "ghost", "neutral", "primary", "secondary", "accent", "info", "success", "warning", or "error".

  • size (:string) - .Must be one of "xs", "sm", "md", "lg", or "xl".

  • outline (:boolean) - . Defaults to false.

  • dashed (:boolean) - . Defaults to false.

  • soft (:boolean) - . Defaults to false.

  • wide (:boolean) - . Defaults to false.

  • shape (:string) - .Must be one of "square", or "circle".

  • type (:string) - The button type, this is ignored if href is passed. Defaults to nil.

  • href (:string) - Create a traditional browser navigation link displayed as a button.

    Underlying element will use Phoenix.Component.link/1 if defined.

  • navigate (:string) - Create a live navigation link displayed as a button.

    Underlying element will use Phoenix.Component.link/1 if defined.

  • patch (:string) - Create a live patch link displayed as a button.

    Underlying element will use Phoenix.Component.link/1 if defined.

  • replace (:boolean) - Only used with :href, :navigate, or :patch.

    See Phoenix.Component.link/1 for details.

    Defaults to false.

  • method (:string) - Only used with :href, :navigate, or :patch.

    See Phoenix.Component.link/1 for details.

    Defaults to "get".

  • csrf_token (:boolean) - Only used with :href, :navigate, or :patch.

    See Phoenix.Component.link/1 for details.

    Defaults to true.

  • Global attributes are accepted.

Slots

  • inner_block (required)