Icon Only Button
Icon only button visually hides the text content of the button. Such a button should be used sparingly and only in places where screen real estate is a concern.
Important Notes:It is recommended that icon only buttons to be used in tandem with tooltip to give the user more context about the button’s function.When writing in plain HTML, aria-label is required, and it must equal to the button text. For example: <button type="button" class="e-bolt-button" aria-label="Download">. Text should not be used inside the button when using aria-label.When writing in plain HTML, <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.
Demo
File size: 25MBAdd another row
Twig
// Icon only button combined with tooltip
{% set icon_download %}
{% include '@bolt-components-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 %}
HTML
// Icon only button combined with tooltip
<bolt-tooltip>
<button type="button" class="e-bolt-button" aria-label="Download"><span class="e-bolt-button__icon-center"><bolt-icon name="download"></bolt-icon></span></button>
<span slot="content">File size: 25MB</span>
</bolt-tooltip>