{% include '@bolt-elements-button/button.twig' with {
content: 'This is a button',
attributes: {
type: 'submit'
}
} only %}
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
attributes
|
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
content
*
|
Content of the button. |
any
| — |
|
icon_before
|
Append an icon before the button content. Icon element is recommended. However, <img> elements are also acceptable. |
any
| — |
|
icon_after
|
Append an icon after the button content. Icon element is recommended. However, <img> elements are also acceptable. |
any
| — |
|
icon_only
|
Append an icon to the button content and visually hide the text content. This prop trumps icon_before and icon_after. |
any
| — |
|
hierarchy
|
Style the button appropriately based on information hierarchy. |
string
|
primary
|
|
size
|
Control the font-size and padding of the button. |
string
|
medium
|
|
border_radius
|
Control the border radius of the button. |
string
|
small
|
|
display
|
Control the display of the button. |
string
|
inline
|
|
background_color
|
Control the background color of the button. This has effect only on the buttons with hierarchy set to primary. |
string
| — |
|
hasLoader
|
When set to true includes additional markup required to show the loading indicator. |
boolean
| — |
|
npm install @bolt/elements-button
<button class="e-bolt-button">
is acceptable at rendering a button, though the Twig template is the recommended usage for Drupal.
content
prop. However, <span>
, <em>
, and <strong>
elements can be used.{% include '@bolt-elements-button/button.twig' with {
content: 'This is a button',
attributes: {
type: 'button'
}
} only %}
<button type="button" class="e-bolt-button">This is a button</button>
<a>
element can use the button style. For example, the button helps to navigate to another page.
href
attribute.{% include '@bolt-elements-button/button.twig' with {
content: 'This looks like a button but semantically is an anchor',
attributes: {
href: 'https://google.com',
}
} only %}
<a href="https://google.com" class="e-bolt-button">This looks like a button but semantically is an anchor</a>
<a>
element or the <button>
element is being used, the proper HTML attributes should be passed.
<a>
requires the href
attribute.<button>
requires the type
attribute.href
, target
, rel
, and id
attributes// <button>
{% include '@bolt-elements-button/button.twig' with {
content: 'This button has the "type" attribute',
attributes: {
type: 'submit',
}
} only %}
// <a>
{% include '@bolt-elements-button/button.twig' with {
content: 'This button has the "href", "target", and "id" attributes',
attributes: {
href: 'https://google.com',
target: '_blank',
rel: 'noopener',
id: 'js-bolt-some-unique-id'
}
} only %}
<a href="https://google.com" target="_blank" rel="noopener" id="js-bolt-some-unique-id" class="e-bolt-button">This button has the "href", "target", "rel", and "id" attributes</a>
<img>
element is also acceptable.
size
prop for the icon element is not well supported in this scenario.<span class="e-bolt-button__icon-before">
and <span class="e-bolt-button__icon-after">
are required to wrap around the icon markup. The wrapper ensures that the icon will always wrap with the final word of the text. It will never wrap to the next line on its own.
// Icon vars
{% set icon_custom %}
<img src="/images/placeholders/square.jpg">
{% endset %}
{% set icon_chevron_down %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'chevron-down',
} only %}
{% endset %}
// Button include
{% include '@bolt-elements-button/button.twig' with {
content: 'This is a button with icons before and after',
icon_before: icon_custom,
icon_after: icon_chevron_down,
attributes: {
type: 'button'
}
} only %}
<button type="button" class="e-bolt-button"><span class="e-bolt-button__icon-before"><!-- Icon or image markup --></span>This is a button with icons before and after<span class="e-bolt-button__icon-after"><!-- Icon or image markup --></span></button>
aria-label
is required to render the button text. For example: <button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="Download">
. Text should not be used inside the button when using aria-label
.<span class="e-bolt-button__icon-center">
is required to wrap around the icon markup. The wrapper ensures that the icon will always center within the button.// Icon only button combined with tooltip
{% set icon_download %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'download',
} only %}
{% endset %}
{% set tooltip_trigger %}
{% include '@bolt-elements-button/button.twig' with {
content: 'Download',
icon_only: icon_download,
attributes: {
type: 'button'
}
} only %}
{% endset %}
{% include '@bolt-components-tooltip/tooltip.twig' with {
trigger: tooltip_trigger,
content: 'File size: 25MB',
} only %}
// Icon only button combined with tooltip
<bolt-tooltip>
<button type="button" class="e-bolt-button e-bolt-button--icon-only" aria-label="Download">
<span class="e-bolt-button__icon-center"><!-- Icon or image markup --></span>
</button>
<span slot="content">File size: 25MB</span>
</bolt-tooltip>
{% include '@bolt-elements-button/button.twig' with {
content: 'This is a secondary button',
hierarchy: 'secondary',
attributes: {
type: 'button'
}
} only %}
<button type="button" class="e-bolt-button e-bolt-button--secondary">This is a secondary button</button>
{% include '@bolt-elements-button/button.twig' with {
content: 'This is a small button',
size: 'small',
attributes: {
type: 'button'
}
} only %}
<button type="button" class="e-bolt-button e-bolt-button--small">This is a small button</button>
border_radius
prop.
{% include '@bolt-elements-button/button.twig' with {
content: 'This is a fully rounded button',
border_radius: 'full',
attributes: {
type: 'button'
}
} only %}
<button type="button" class="e-bolt-button e-bolt-button--border-radius-full">This is a fully rounded button</button>
display
prop is set to inline@from-small
, it means the button is block display below the small breakpoint, and transform to inline display from small breakpoint and up. Resize the browser to see the demo below.
{% include '@bolt-elements-button/button.twig' with {
content: 'This is a full width button',
display: 'block',
attributes: {
type: 'button'
}
} only %}
<button type="button" class="e-bolt-button e-bolt-button--block">This is a full width button</button>
<input id="unique-file-id" type="file" class="e-bolt-button e-bolt-button--small e-bolt-button--tertiary">
background_color
prop.
{% include '@bolt-elements-button/button.twig' with {
content: 'This is a primary button',
background_color: 'teal',
attributes: {
type: 'button'
}
} only %}
<button type="button" class="e-bolt-button e-bolt-button--secondary t-bolt-teal">This is a primary button</button>
hasLoader
to true
, the additional markup is added to the button container to use the loader indicator.aria-busy
attribute is added.e-bolt-button--is-loading
class via JavaScript. For accessibility, also set aria-busy
to true. Once you are done loading, remove the loading class and set aria-busy
to false
.{% include '@bolt-elements-button/button.twig' with {
content: 'Loading state',
attributes: {
type: 'button',
}
hasLoader: true,
} only %}
<button type="button" class="e-bolt-button" aria-busy="false">Loading state <span class="e-bolt-button__loading-spinner" aria-hidden="true"></span></button>