View Source BitstylesPhoenix.Component.Button (bitstyles_phoenix v2.4.0)
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)color
- specifies the color of the button, e.gsecondary
,transparent
. Leave empty for default color. Introduced in Bitstyles 5.0.0.shape
- specifies the color of the button, e.gsquare
,small
. Leave empty for default color. Introduced in Bitstyles 5.0.0.variant
- specifies which visual variant of button you want, from those available in the CSS classes e.g.ui
,danger
. Deprecated in favor ofcolor
andshape
in Bitstyles 5.0.0.class
- Extra classes to pass to the badge. SeeBitstylesPhoenix.Helper.classnames/1
for usage.icon
- An icon name as string or a tuple with{icon_name, icon_opts}
which is passed toBitstylesPhoenix.Component.Icon.ui_icon/1
as attributes. Additionally it is possible to passafter: 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>
"""
Default link
iex> assigns = %{}
...> render ~H"""
...> <.ui_button href="/">
...> Publish
...> </.ui_button>
...> """
"""
<a href="/" class="a-button">
Publish
</a>
"""
Default disabled link renders disabled button instead
iex> assigns = %{}
...> render ~H"""
...> <.ui_button href="/" disabled>
...> Publish
...> </.ui_button>
...> """
"""
<button type="button" class="a-button" 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>
"""
Secondary button
iex> assigns = %{}
...> render ~H"""
...> <.ui_button type="submit" color={:secondary}>
...> Save
...> </.ui_button>
...> """
"""
<button type="submit" class="a-button a-button--secondary">
Save
</button>
"""
Small button
iex> assigns = %{}
...> render ~H"""
...> <.ui_button type="submit" shape={:small}>
...> Save
...> </.ui_button>
...> """
"""
<button type="submit" class="a-button a-button--small">
Save
</button>
"""
Dangerous button
iex> assigns = %{}
...> render ~H"""
...> <.ui_button type="submit" color={: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--square" 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--square 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--square" data-theme="dark" 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>