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: 25MB Add 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 %}
HTML
// 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"><bolt-icon name="download"></bolt-icon></span> </button> <span slot="content">File size: 25MB</span> </bolt-tooltip>