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
Twig
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
HTML
// Icon only button combined with tooltip
<bolt-tooltip><buttontype="button"class="e-bolt-button e-bolt-button--icon-only"aria-label="Download"><spanclass="e-bolt-button__icon-center"><!-- Icon or image markup --></span></button><spanslot="content">File size: 25MB</span></bolt-tooltip>