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 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.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-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 %}