BitstylesPhoenix.Helper.Button.ui_icon_button
You're seeing just the function
ui_icon_button
, go back to BitstylesPhoenix.Helper.Button module for more information.
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>
"""