# `EzAuth.UI.Core.Buttons`
[🔗](https://github.com/thiagomajesk/ez_auth/blob/v0.1.0/lib/ez_auth/ui/core/buttons.ex#L1)

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.

# `action`

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`

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`

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"]`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*