BitstylesPhoenix.Helper.Button.ui_button
You're seeing just the function
ui_button
, go back to BitstylesPhoenix.Helper.Button module for more information.
Renders anchor or button elements that look like a button — using the a-button
classes. It accepts similar options to
Phoenix.HTML.Link.button/2
, with the following additional notes/options:
to
- if there’s ato
parameter, you’ll get an anchor element, otherwise a button element. The option is also fowarded tolink_fn
link_fn
- Overrides the function used to generate the anchor element, whento
is provided. By default, the anchor element will be generated withPhoenix.HTML.Link.link/2
.link_fn
must be a function of arity 2, accepting a text and opts as argument. For example, one could pass Phoenix LiveView'slive_redirect/2
orlive_patch/2
.variant
- specifies which visual variant of button you want, from those available in the CSS classes e.g.ui
,danger
class
- Extra classes to pass to the badge. SeeBitstylesPhoenix.Helper.classnames/1
for usage.icon
- An icon name as string or a tuple with{icon_name, icon_opts}
which is passed toBitstylesPhoenix.Component.Icon.ui_icon/1
as attributes. Additionally it is possible to passafter: true
to the icon_opts, to make the icon appear after the button label instead of in front of it.
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> render ui_button("Save", type: "submit")
"""
<button class="a-button" type="submit">
Save
</button>
"""
Default submit button with custom classes
iex> render ui_button("Save", type: "submit", class: "foo bar")
"""
<button class="a-button foo bar" type="submit">
Save
</button>
"""
UI button
iex> render ui_button("Save", type: "submit", variant: :ui)
"""
<button class="a-button a-button--ui" type="submit">
Save
</button>
"""
Dangerous button
iex> render ui_button("Save", type: "submit", variant: :danger)
"""
<button class="a-button a-button--danger" type="submit">
Save
</button>
"""
Button with an icon
iex> render ui_button("Add", type: "submit", icon: "plus")
"""
<button class="a-button" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-button__icon" focusable="false" height="16" width="16">
<use xlink:href="#icon-plus">
</use>
</svg>
<span class="a-button__label">
Add
</span>
</button>
"""
Requires additional content on the page:
<svg xmlns="http://www.w3.org/2000/svg" hidden aria-hidden="true">
<symbol id="icon-plus" viewBox="0 0 100 100">
<path d="M54.57,87.43V54.57H87.43a4.57,4.57,0,0,0,0-9.14H54.57V12.57a4.57,4.57,0,1,0-9.14,0V45.43H12.57a4.57,4.57,0,0,0,0,9.14H45.43V87.43a4.57,4.57,0,0,0,9.14,0Z"/>
</symbol>
</svg>
Button with an icon after
iex> render ui_button("Add", type: "submit", icon: {"plus", after: true})
"""
<button class="a-button" type="submit">
<span class="a-button__label">
Add
</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-button__icon" focusable="false" height="16" width="16">
<use xlink:href="#icon-plus">
</use>
</svg>
</button>
"""
Requires additional content on the page:
<svg xmlns="http://www.w3.org/2000/svg" hidden aria-hidden="true">
<symbol id="icon-plus" viewBox="0 0 100 100">
<path d="M54.57,87.43V54.57H87.43a4.57,4.57,0,0,0,0-9.14H54.57V12.57a4.57,4.57,0,1,0-9.14,0V45.43H12.57a4.57,4.57,0,0,0,0,9.14H45.43V87.43a4.57,4.57,0,0,0,9.14,0Z"/>
</symbol>
</svg>
Pass along attributes to Phoenix helpers
iex> render ui_button("Show", to: "/admin/admin_accounts/id", data: [confirm: "Are you sure?"])
"""
<a class="a-button" data-confirm="Are you sure?" href="/admin/admin_accounts/id">
Show
</a>
"""
Button with block content
iex> render(ui_button(to: "/foo") do
...> "Save"
...> end)
"""
<a class="a-button" href="/foo">
Save
</a>
"""
Button with a custom link function
iex> defmodule CustomLink do
...> def link(text, opts), do: Phoenix.HTML.Tag.content_tag(:a, text, href: opts[:to], class: opts[:class])
...> end
iex> render ui_button("Show", to: "/foo", link_fn: &CustomLink.link/2)
"""
<a class="a-button" href="/foo">
Show
</a>
"""