Icon Button
Icon Button is used to perform an action with an icon, without requiring a text label. It is often used for actions like editing, deleting, or navigating.
Last updated
Icon Button is used to perform an action with an icon, without requiring a text label. It is often used for actions like editing, deleting, or navigating.
Last updated
Icon buttons allow users to perform quick actions using only an icon, making them ideal for spaces like toolbars, headers, or mobile interfaces where space is limited. They’re best suited for familiar actions (e.g., "edit," "delete") .
An icon button consists of a single icon within a button shape, designed to convey its purpose through the icon alone. Icon buttons enhance usability by providing efficient, space-saving interactions. Each button has distinct visual states (hover, active, disabled) and can be styled to indicate hierarchy or function, supporting user navigation and interaction.
Icon: The central element of the button, the icon visually represents the action associated with the button. It allows users to quickly understand the button's purpose, especially in interfaces where space is limited. The icon itself is the primary visual cue, making the button intuitive and easy to recognize.
Dos
Don'ts
Use clear and recognizable icons that represent the action effectively.
Don’t overcrowd the interface with too many Icon Buttons; prioritize actions.
Ensure the button is easily tappable or clickable, with sufficient spacing around it.
Avoid using ambiguous or unclear icons.
Provide tooltips or ARIA labels for icons that might not be universally understood.
Don’t rely solely on color to indicate different button states; use shapes and icons as well.
Use appropriate variants to indicate the button's importance or state.
Don’t use icons without providing textual alternatives for accessibility purposes.
Ensure icons have sufficient contrast against their background.
Avoid inconsistent usage of icon button styles across similar actions.
