BitstylesPhoenix.Component.Button.ui_icon_button

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

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>