View Source PineUi.Button (Pine UI v0.1.2)

Provides button components with various styles and states.

The Button module offers primary, secondary, and danger button variants with support for loading states, icons, and Phoenix LiveView integration.

Examples

<PineUi.button_primary>
  Submit
</PineUi.button_primary>

<PineUi.button_secondary loading={@saving} phx_click="cancel">
  Cancel
</PineUi.button_secondary>

<PineUi.button_danger disabled={@cannot_delete} phx_click="delete" phx_value_id={@id}>
  Delete
</PineUi.button_danger>

Accessibility

All button components provide proper focus states, ARIA attributes, and keyboard interaction support.

Summary

Functions

Renders a danger button component with optional loading state.

Renders a primary button component with optional loading state.

Renders a secondary button component with optional loading state.

Functions

Renders a danger button component with optional loading state.

Danger buttons should be used for destructive actions such as delete or remove.

Examples

<.danger>Delete Account</.danger>

<.danger loading={@deleting} phx_click="delete" phx_value_id={@item.id}>
  Remove Item
</.danger>

Options

  • :type - Button type attribute (optional, defaults to "button")
  • :class - Additional CSS classes (optional)
  • :disabled - Whether the button is disabled (optional, defaults to false)
  • :loading - Whether to show loading state (optional, defaults to false)
  • :icon - HTML string for an icon to display before text (optional)
  • :phx_click - The LiveView click event to trigger (optional)
  • :phx_value_id - The id value to pass with the event (optional)
  • :phx_target - The LiveView target for the event (optional)

Renders a primary button component with optional loading state.

Examples

<.primary>Submit</.primary>

<.primary loading={true} phx_click="save" disabled={@form_invalid}>
  Save Changes
</.primary>

<.primary icon="<svg>...</svg>">
  With Icon
</.primary>

Options

  • :type - Button type attribute (optional, defaults to "button")
  • :class - Additional CSS classes (optional)
  • :disabled - Whether the button is disabled (optional, defaults to false)
  • :loading - Whether to show loading state (optional, defaults to false)
  • :icon - HTML string for an icon to display before text (optional)
  • :phx_click - The LiveView click event to trigger (optional)
  • :phx_value_id - The id value to pass with the event (optional)
  • :phx_target - The LiveView target for the event (optional)

Renders a secondary button component with optional loading state.

Secondary buttons are often used for secondary actions or alternative options.

Examples

<.secondary>Cancel</.secondary>

<.secondary loading={@processing} phx_click="back">
  Go Back
</.secondary>

Options

  • :type - Button type attribute (optional, defaults to "button")
  • :class - Additional CSS classes (optional)
  • :disabled - Whether the button is disabled (optional, defaults to false)
  • :loading - Whether to show loading state (optional, defaults to false)
  • :icon - HTML string for an icon to display before text (optional)
  • :phx_click - The LiveView click event to trigger (optional)
  • :phx_value_id - The id value to pass with the event (optional)
  • :phx_target - The LiveView target for the event (optional)