BitstylesPhoenix.Component.Button.ui_button

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

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>
"""