BitstylesPhoenix.Components.Button (bitstyles_phoenix v0.1.0) View Source

Button and button-like UI components

Link to this section Summary

Functions

Renders anchor or button elements that look like a button — using the a-button classes. It accepts similar parameters to Phoenix.HTML.Link/2, with the following additional notes

Link to this section Functions

Renders anchor or button elements that look like a button — using the a-button classes. It accepts similar parameters to Phoenix.HTML.Link/2, with the following additional notes:

opts[:to] — if there’s a to parameter, you’ll get an anchor element, otherwise a button element. opts[:variant] — specifies which visual variant of button you want, from those available in the CSS classes e.g. primary, danger opts[:e2e_classname] — A classname that will be applied to the element for testing purposes, only on integration env

All other parameters you pass are forwarded to the Phoenix link or submit helpers, if one of those is rendered.

Examples

iex> doctest_ui_component ui_button("Save", type: "submit")
~s(<button class="a-button" type="submit">Save</button>)

iex> doctest_ui_component ui_button("Save", type: "submit", variant: "primary")
~s(<button class="a-button a-button--primary" type="submit">Save</button>)

iex> doctest_ui_component ui_button("Click me", variant: "clear", type: "reset")
~s(<button class="a-button a-button--clear" type="reset">Click me</button>)

iex> doctest_ui_component ui_button("Show", to: "/admin/admin_accounts/id", data: [confirm: "Are you sure?"])
~s(<a class="a-button" data-confirm="Are you sure?" href="/admin/admin_accounts/id">Show</a>)

iex> doctest_ui_component ui_button("Click me", variant: "clear", type: "submit", data: [confirm: "Are you sure?"])
~s(<button class="a-button a-button--clear" data-confirm="Are you sure?" type="submit">Click me</button>)