# Icon Button
## 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
{% tabs %}
{% tab title="Vanilla Js" %}
```jsx
```
{% endtab %}
{% tab title="React" %}
```jsx
```
{% endtab %}
{% tab title="Vue" %}
```jsx
```
{% endtab %}
{% tab title="Angular" %}
```jsx
```
{% endtab %}
{% endtabs %}
## Properties
| Property | Descriptions | Type |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| `button_type` | Specifies the button type. Common values: `"button"`, `"submit"`, `"reset".` | `string` |
| `button_color` |
| `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
| 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. |
