EzAuth.UI.Core.Buttons (EzAuth v0.1.0)

Copy Markdown View Source

Button components used throughout EzAuth flows.

submit/1 is the primary call-to-action inside a form. action/1 is the generic button primitive (icon + optional label, plus caller-supplied attributes). strategy/1 renders any strategy as a form-submit action button.

Summary

Functions

action(assigns)

Renders a generic button.

strategy(assigns)

Renders a strategy as a form-submit action button.

submit(assigns)

Renders a form submit button with a trailing forward arrow.

Functions

action(assigns)

Renders a generic button.

Always renders a <button>. Both :icon and :label are optional; callers attach behaviour and Phoenix LiveView attributes (phx-click, phx-target, etc.) through :rest.

Options

  • :icon - optional icon atom supported by EzAuth.UI.Core.icon/1. Always rendered to the left of the label at a fixed size.
  • :label - optional text rendered next to the icon.
  • :variant - the data-part written on the rendered <button>. Defaults to "action". submit/1 and other wrappers can pass a different value to attach their own CSS hook.
  • :type - button type. One of :button (default) or :submit. The default avoids accidental parent-form submission; pass :submit explicitly for form CTAs.

Styling

  • [data-part="{variant}"] - the button container.
  • [data-part="action-label"] - the label span (only when :label is set).

Examples

<EzAuth.UI.Core.Buttons.action icon={:google} type={:submit} />
<EzAuth.UI.Core.Buttons.action icon={:github} label="Sign in with GitHub" phx-click="oauth_github" />

Attributes

  • icon (:atom) - Defaults to nil.
  • label (:string) - Defaults to nil.
  • variant (:string) - Defaults to "action".
  • type (:atom) - Defaults to :button. Must be one of :button, or :submit.
  • Global attributes are accepted. Supports all globals plus: ["name", "value", "title", "disabled"].

strategy(assigns)

Renders a strategy as a form-submit action button.

Derives the icon and label from the strategy's callbacks: identity drives the icon (with :magic_link overriding to :link); name fills the "Continue with {name}" label. Submits with name="_strategy" and the strategy id as the value, so the parent form handler can branch on params["_strategy"].

Options

  • :strategy - the strategy module (required).

Styling

  • [data-part="action"] - the button container.
  • [data-strategy={id}] - strategy id on the button.

Examples

<EzAuth.UI.Core.Buttons.strategy strategy={EzAuth.Strategies.Google} />

Attributes

  • strategy (:atom) (required)
  • Global attributes are accepted.

submit(assigns)

Renders a form submit button with a trailing forward arrow.

Options

  • :label - button text. Defaults to translated "Continue".

Styling

  • [data-part="submit"] - submit button.

Examples

<EzAuth.UI.Core.Buttons.submit />
<EzAuth.UI.Core.Buttons.submit label="Sign in" />

Attributes

  • label (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["disabled"].