BitstylesPhoenix.Button.ui_button

You're seeing just the function ui_button, go back to BitstylesPhoenix.Button module for more information.

Renders anchor or button elements that look like a button — using the a-button classes. It accepts similar parameters to Phoenix.HTML.Link.button/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. ui, 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.

See the bitstyles button docs for available button variants.

Default submit button

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

Default submit button with custom classes

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

UI button

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

Dangerous button

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

Combine variants

iex> safe_to_string ui_button("Save", type: "submit", variant: [:ui, :danger])
~s(<button class="a-button a-button--ui a-button--danger" type="submit">Save</button>)

Pass along attributes to Phoenix helpers

iex> safe_to_string 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>)

Button with block content

iex> safe_to_string(ui_button(to: "/foo") do
...>   "Save"
...> end)
~s(<a class="a-button" href="/foo">Save</a>)