IconButton

Usage

Icon Buttons are graphical UI elements that allow users to interact with the application. They serve as simple and intuitive graphical representations of functions that users can perform. Ideal for space-sensitive interfaces, they improve the user experience by providing a familiar visual metaphor for a given action. Use Icon Buttons:

• When you need to represent an action or functionality in a more visual manner.
• When you're working with limited space and text-based buttons would clutter the UI.
• When you want to improve the scanability of your interface with familiar icons.

Types

On the highest level size and layout-wise there are 2 variants of Icon Buttons: the default one called Icon Button and the Icon Button Compact for usage inside some components where we have limited space, such as inside Chips.

Also, Icon Buttons can serve various purposes, with the type of icon indicating their intended function:

• Close Icon Button: Generally used to close modals, dialogs, or any collapsible sections.
• Back Icon Button: A button with a chevron icon that typically indicates a 'back' navigation function.
• Expand/Collapse Icon Button: A button with a double chevron icon that's typically used to expand or collapse content.

INFO

Icon Button collection will grow as we will require more and more new functionalities for our applications that will require new icons.

Each of the above-mentioned variants can come in two distinct Types in order of emphasis:

• Primary: Adheres to the primary color palette of each brand. Used to maintain brand consistency and emphasize core functionalities related to the brand theme.
• Secondary: Neutral in appearance, these are used for generic or common functions where the brand color is not necessary or could be distracting.

Anatomy and Behavior

1. Container: The clickable area that encloses the icon.
2. Icon: The main graphical representation of the functionality of the IconButton. It should be intuitive and familiar to users. Each icon represents a functionality and may alter the type of IconButton.

States

IconButton has hover, active, focus, and Disabled states.

Gaps and Sizes

ICON BUTTON

• Icon width and height: Mplus
• Padding: XS
• Container width and height: XL
• Corner radius: 2XS

ICON BUTTON COMPACT

• Icon width and height: Mplus
• Container width and height: Mplus
• Corner radius: Unit

Tokens

SCSS Variable

Value

$iconButton-primary-color

--color-grey-25

$iconButton-secondary-color

--color-grey-40

$iconButton-secondary-color--locked

--color-grey-70

$iconButton-secondary-bgColor--hover

--color-grey-93

$iconButton-secondary-bgColor--active

--color-grey-93

$iconButton-outline-color--focus

--color-azure-45

$iconButton-primary-color--locked

--bds-brand-primary-color-locked

$iconButton-boxShadow--hover

--embossed-1--grey-98

$iconButton-boxShadow--active

--debossed-1--grey-98

$iconButton-cornerRadius

--gutter-2xs

Properties

export type IconButtonProps =  & ElementProps  & TooltipProps   & {
  icon: IconName;
  disabled?: boolean;
  type?: 'primary' | 'secondary';
  textColor?: string;
}

export interface IconButtonCompactProps extends IconButtonProps { }

Configurations

Type	IconButton		IconButton Compact
	Default	Disabled	Default	Disabled
Primary
Secondary

Icon Button Sizes
Size	IconButton	IconButton Compact
	small
medium
big