Corex.Action (Corex v0.1.0-alpha.33)

View Source

Renders a button element for actions based on Phoenix Core Components. Use the type attribute to set the button type. Icon-only buttons must pass aria_label to screen readers.

Examples

  <.action>Send!</.action>
  <.action phx-click="go">Send!</.action>
  <.action type="submit">Save</.action>
  <.action aria_label="Close dialog">
    <.heroicon name="hero-x-mark" aria-hidden="true" />
  </.action>

Styling

If you wish to use the default Corex styling, you can use the class button on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/button.css";

You can then use modifiers

<.action class="button button--accent button--lg">

Learn more about modifiers and Corex Design

Summary

Components

action(assigns)

Components

action(assigns)

Attributes

  • type (:string) - The button type, defaults to button to prevent accidental form submissions. Defaults to "button". Must be one of "button", "submit", or "reset".
  • aria_label (:string) - Required for icon-only buttons, describes the button to screen readers. Defaults to nil.
  • disabled (:boolean) - Disables the button. Defaults to false.
  • name (:string) - Form input name for submit buttons. Defaults to nil.
  • value (:string) - Form input value for submit buttons. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)