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.
Overview
Usage
When to Use This Component
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") .
How It Works
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.
Code
<dda-button
button_type="button"
button_color="default-primary"
start_icon="sentiment_satisfied"
button_id="icon-button"
aria_label="icon button"
button_name="iconButton"
value="icon-value"
icon_button_shape="default"
size="md"
disabled="false"
custom_class=""
component_mode=""
onclick="console.log('native click')"
></dda-button>Properties
button_type
Specifies the button type. Common values: "button", "submit", "reset".
string
button_color
Defines the button color variant. Example values: 'default-primary' , 'default-secondary' , 'default-tertiary' , 'default-link' , 'error-primary' , 'error-secondary' , 'error-tertiary' , 'error-link' ,
'onsurface-primary' , 'onsurface-secondary' , 'onsurface-tertiary' , 'onsurface-link' ,
'secondary' , 'success' , 'warning' , 'surface' , 'surface-variant' , 'disabled'
string
start_icon
The name of the icon to display at the start of the button. Uses Material Icons.
string
button_id
Unique identifier for the button element.
string
aria_label
Accessibility label for screen readers.
string
button_name
Name attribute for the button component
string
value
Value of the button
string
icon_button_shape
Defines the shape of an icon-only button.
string
size
cifies the button size. Example values: 'sm', 'md', 'lg'.
string
clickHandler
Function to be executed when the button is clicked.
(event: MouseEvent) => void
disabled
Determines if the button should be disabled.
boolean
custom_class
Allows adding a custom CSS class to the button for additional styling.
string
component_mode
Used for setting a mode-related styling or behavior.
string
onclick
unction to be executed when the button is clicked.
(event: MouseEvent) => void
Anatomy
Anatomy Option
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 and 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.
Last updated