View Source BitstylesPhoenix.Component.Button (bitstyles_phoenix v2.3.1)

The button component.

Summary

Functions

Renders anchor or button elements that look like a button — using the a-button classes.

An icon button with sr text and title. Accepts an icon name and a label.

Functions

Renders anchor or button elements that look like a button — using the a-button classes.

  • href, navigate, patch - if there’s one of these, you’ll get an anchor element, otherwise a button element. (See Phoenix.Component.link/1)
  • 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 attributes you pass are forwarded to Phoenix.Component.link/1 or on the button tag, if one of those is rendered.

See the bitstyles button docs for available button variants.

See BitstylesPhoenix.Helper.Button.ui_button/2 for more examples and options.

Default button

iex> assigns = %{}
...> render ~H"""
...> <.ui_button>
...>   Publish
...> </.ui_button>
...> """
"""
<button type="button" class="a-button">
  Publish
</button>
"""
iex> assigns = %{}
...> render ~H"""
...> <.ui_button href="/" variant="ui">
...>   Publish
...> </.ui_button>
...> """
"""
<a href="/" class="a-button a-button--ui">
  Publish
</a>
"""
iex> assigns = %{}
...> render ~H"""
...> <.ui_button href="/" variant="ui" disabled>
...>   Publish
...> </.ui_button>
...> """
"""
<button type="button" class="a-button a-button--ui" disabled="disabled">
  Publish
</button>
"""

Default submit button

iex> assigns = %{}
...> render ~H"""
...> <.ui_button type="submit">
...>   Save
...> </.ui_button>
...> """
"""
<button type="submit" class="a-button">
  Save
</button>
"""

Default submit button with custom classes

iex> assigns = %{}
...> render ~H"""
...> <.ui_button type="submit" class="foo bar">
...>   Save
...> </.ui_button>
...> """
"""
<button type="submit" class="a-button foo bar">
  Save
</button>
"""

UI button

iex> assigns = %{}
...> render ~H"""
...> <.ui_button type="submit" variant={:ui}>
...>   Save
...> </.ui_button>
...> """
"""
<button type="submit" class="a-button a-button--ui">
  Save
</button>
"""

Dangerous button

iex> assigns = %{}
...> render ~H"""
...> <.ui_button type="submit" variant={:danger}>
...>   Save
...> </.ui_button>
...> """
"""
<button type="submit" class="a-button a-button--danger">
  Save
</button>
"""

Button with an icon

iex> assigns = %{}
...> render ~H"""
...> <.ui_button type="submit" icon="plus">
...>   Add
...> </.ui_button>
...> """
"""
<button type="submit" class="a-button">
  <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> assigns = %{}
...> render ~H"""
...> <.ui_button href="/" icon={{"plus", after: true}}>
...>   Add
...> </.ui_button>
...> """
"""
<a href="/" class="a-button">
  <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>
</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>

Pass along attributes to Phoenix helpers

iex> assigns = %{}
...> render ~H"""
...> <.ui_button href="/admin/admin_accounts/id" data-confirm="Are you sure?">
...>   Add
...> </.ui_button>
...> """
"""
<a href="/admin/admin_accounts/id" class="a-button" data-confirm="Are you sure?">
  Add
</a>
"""

Button with LiveView patch

iex> assigns = %{}
...> render ~H"""
...> <.ui_button patch="/foo">
...>   Add
...> </.ui_button>
...> """
"""
<a href="/foo" data-phx-link="patch" data-phx-link-state="push" class="a-button">
  Add
</a>
"""

An icon button with sr text and title. Accepts an icon name and a label.

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.

Attributes

  • icon - An icon name as string or a tuple of {name, icon_opts} to be passed on.
  • label - A screen reader label for the button.
  • reversed - Icon reversed style (see examples)
  • All other attributes are passed in as attributes to BitstylesPhoenix.Component.Button.ui_button/1.

Icon button

iex> assigns = %{}
...> render ~H"""
...> <.ui_icon_button icon="plus" label="Add" href="#"/>
...> """
"""
<a href="#" class="a-button a-button--icon" title="Add">
  <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">
    Add
  </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 some options

iex> assigns = %{}
...> render ~H"""
...> <.ui_icon_button icon={{"bin", file: "assets/icons.svg", size: "xl"}} label="Delete" class="foo" />
...> """
"""
<button type="button" class="a-button a-button--icon foo" title="Delete">
  <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">
    Delete
  </span>
</button>
"""

Icon button reversed

iex> assigns = %{}
...> render ~H"""
...> <.ui_icon_button icon="plus" label="Show" href="#" reversed />
...> """
"""
<a href="#" class="a-button a-button--icon a-button--icon-reversed" 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>