Corex.Action (Corex v0.1.0-rc.1)

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.

Anatomy

<.action class="button">Send!</.action>

<.action class="button" phx-click="go">Send!</.action>

<.action class="button" type="submit">Save</.action>

<.action class="button" aria_label="Close dialog">
  <.heroicon name="hero-x-mark" aria-hidden="true" />
</.action>

Style

Import tokens and button.css, then set class="button" on <.action>.

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

Stack modifiers on the host.

Color

Modifier	Classes
Default	`button`
Accent	`button button--accent`
Brand	`button button--brand`
Alert	`button button--alert`
Info	`button button--info`
Success	`button button--success`

Size

Modifier	Classes
SM	`button button--sm`
MD	`button button--md`
LG	`button button--lg`
XL	`button button--xl`

Rounded

Use Tailwind rounded-* utilities on the host (for example class="button rounded-xl").

Modifier	Classes
None	`button rounded-none`
SM	`button rounded-sm`
MD	`button rounded-md`
LG	`button rounded-lg`
XL	`button rounded-xl`
Full	`button rounded-full`

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)