Packages
corex
0.1.0-alpha.27
0.1.2
0.1.1
0.1.0
0.1.0-rc.1
0.1.0-rc.0
0.1.0-beta.5
0.1.0-beta.4
0.1.0-beta.3
0.1.0-beta.2
0.1.0-beta.1
0.1.0-alpha.33
0.1.0-alpha.32
0.1.0-alpha.31
0.1.0-alpha.30
0.1.0-alpha.29
0.1.0-alpha.28
0.1.0-alpha.27
0.1.0-alpha.26
0.1.0-alpha.25
0.1.0-alpha.24
0.1.0-alpha.23
0.1.0-alpha.22
0.1.0-alpha.21
0.1.0-alpha.20
0.1.0-alpha.19
0.1.0-alpha.18
0.1.0-alpha.17
0.1.0-alpha.16
0.1.0-alpha.15
0.1.0-alpha.14
0.1.0-alpha.13
0.1.0-alpha.12
0.1.0-alpha.11
0.1.0-alpha.10
0.1.0-alpha.9
0.1.0-alpha.8
0.1.0-alpha.7
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
Accessible and unstyled UI components library written in Elixir and TypeScript that integrates Zag.js state machines into the Phoenix Framework.
Current section
Files
Jump to
Current section
Files
lib/components/action.ex
defmodule Corex.Action do
@moduledoc """
Renders a button element for actions based of Phoenix Core Components.
Use the `type` attribute to set the button type.
Icon-only buttons must pass `aria_label` to screen readers.
## Examples
```elixir
<.action>Send!</.action>
<.action phx-click="go">Send!</.action>
<.action type="submit">Save</.action>
<.action aria_label="Close dialog">
<.icon 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.
```css
@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/button.css";
```
You can then use modifiers
```heex
<.action class="button button--accent button--lg">
```
Learn more about modifiers and [Corex Design](https://corex-ui.com/components/button#modifiers)
"""
@doc type: :component
use Phoenix.Component
attr(:type, :string,
default: "button",
values: ["button", "submit", "reset"],
doc: "The button type, defaults to button to prevent accidental form submissions"
)
attr(:aria_label, :string,
default: nil,
doc: "Required for icon-only buttons, describes the button to screen readers"
)
attr(:disabled, :boolean, default: false, doc: "Disables the button")
attr(:rest, :global,
include: ~w(class name value form phx-click phx-submit phx-disable-with phx-value)
)
slot(:inner_block, required: true)
def action(assigns) do
~H"""
<button type={@type} aria-label={@aria_label} disabled={@disabled} {@rest}>
{render_slot(@inner_block)}
</button>
"""
end
end