BitstylesPhoenix.Helper.Button (bitstyles_phoenix v1.0.0-rc3) View Source

Helpers to create buttons and links.

Link to this section Summary

Functions

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

An icon button with sr text and title. Accepts an icon name, a label and the following options

Link to this section Functions

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 a to parameter, you’ll get an anchor element, otherwise a button element. The option is also fowarded to link_fn
  • link_fn - Overrides the function used to generate the anchor element, when to is provided. By default, the anchor element will be generated with Phoenix.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's live_redirect/2 or live_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. See BitstylesPhoenix.Helper.classnames/1 for usage.
  • icon - An icon name as string or a tuple with {icon_name, icon_opts} which is passed to BitstylesPhoenix.Component.Icon.ui_icon/1 as attributes. Additionally it is possible to pass after: 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>
"""
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>
"""
Link to this function

ui_icon_button(icon, label, opts \\ [])

View Source

An icon button with sr text and title. Accepts an icon name, a label and the following options:

The icon can be either provided as icon name string, or as tuple with {name, icon_opts} where the name is the icon name and icon options that are passed as attributes to BitstylesPhoenix.Component.Icon.ui_icon.

Options:

  • reversed - Icon reversed style (see examples)
  • All other options are passed to ui_button/2

    Icon button

iex> render ui_icon_button("plus", "Show", to: "#")
"""
<a class="a-button a-button--icon" href="#" title="Show">
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon" focusable="false" height="16" width="16">
    <use xlink:href="#icon-plus">
    </use>
  </svg>
  <span class="u-sr-only">
    Show
  </span>
</a>
"""

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>

Icon button reversed

iex> render ui_icon_button("plus", "Show", to: "#", reversed: true)
"""
<a class="a-button a-button--icon a-button--icon-reversed" href="#" title="Show">
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon" focusable="false" height="16" width="16">
    <use xlink:href="#icon-plus">
    </use>
  </svg>
  <span class="u-sr-only">
    Show
  </span>
</a>
"""

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>

Icon button with opts

iex> render ui_icon_button({"bin", file: "assets/icons.svg", size: "xl"}, "Show", to: "#", class: "foo")
"""
<a class="a-button a-button--icon foo" href="#" title="Show">
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--xl" focusable="false" height="16" width="16">
    <use xlink:href="assets/icons.svg#icon-bin">
    </use>
  </svg>
  <span class="u-sr-only">
    Show
  </span>
</a>
"""