IconButton

An icon only IconButton component for compact actions such as search, close or filter. It renders a Button under the hood, so it shares the same variants, sizes and states.

Because there is no visible text, always pass dataAriaLabel so the button is announced with a name.

Import

React

// with @dhl-official/react-library:
import { DhlIconButton } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlIconButton } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<duil310-dhl-icon-button></duil310-dhl-icon-button>

Vue.js

If the DUIL has been installed, you can use the web component directly:

<duil310-dhl-icon-button></duil310-dhl-icon-button>

Variants

The variant values are the same as on Button, so the same value works on both components. They map to the design names as follows:

Design	variant
Primary	primary
Secondary	outlineBlack
Secondary-highlight	outline
Tonal	tonal
Ghost	ghostBlack
Ghost-highlight	ghost

The button is a rounded square by default. Set isRound for a circle.

Code

React

<DhlIconButton icon={Search} dataAriaLabel="Search" clickEvent={() => {}} />

Angular

<duil310-dhl-icon-button [icon]="searchIcon" data-aria-label="Search" [clickEvent]="onSearch" />

Vue.js

<duil310-dhl-icon-button :icon.prop="searchIcon" data-aria-label="Search" :clickEvent.prop="() => {}" />

Active state

active applies the pressed treatment of the variant until it is toggled off and exposes aria-pressed="true". It is a persistent state, unlike the momentary :active pseudo-class. There is no loading state on IconButton.

React

<DhlIconButton icon={Filter} dataAriaLabel="Filter" active />

Angular

<duil310-dhl-icon-button [icon]="filterIcon" data-aria-label="Filter" [active]="true" />

Vue.js

<duil310-dhl-icon-button :icon.prop="filterIcon" data-aria-label="Filter" active />

Interactive Demo

Readme

Overview

An icon only button. It renders a duil310-dhl-button so that both components share a single set of variant, size and state styles.

Properties

Property	Attribute	Description	Type	Default
active	active	An optional prop that keeps the pressed visual treatment of the variant applied until it is toggled off. Unlike the :active pseudo-class, this is persistent and exposed as aria-pressed.	boolean	false
clickEvent	click-event	An optional onClick callback handler.	(e: MouseEvent) => void	undefined
dataAriaControls	data-aria-controls	An optional ariaControls prop that is used as a 'relationship attribute' which denotes which elements in a page an interactive element or set of elements has control over and affects.	string	undefined
dataAriaDescribedby	data-aria-describedby	An optional prop used to associate the button with an element that describes it. Useful for explaining why a button is disabled.	string	undefined
dataAriaExpanded	data-aria-expanded	An optional prop used for assistive technology support - used to mark expandable and collapsible regions.	string	undefined
dataAriaLabel	data-aria-label	A recommended prop defining the text read by the screen reader to represent the component. An icon only button has no visible text, so without it the button is announced without a name.	string	undefined
dataAriaLabelledby	data-aria-labelledby	An optional ariaLabelledby prop that establishes the relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labelling. List multiple element IDs in a space delimited fashion.	string	undefined
dataAriaPressed	data-aria-pressed	An optional ariaPressed prop that indicates the pressed state of a toggle button to assistive technology. The active prop already sets it, so this is only needed for a toggle that is not visually pressed.	string	undefined
dataAutoFocus	data-auto-focus	An optional prop that when set, automatically sets focus on mount.	boolean	undefined
dataClassName	data-class-name	An optional class name prop for the component.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	`duil310-dhl-icon-button-${getRandomString()}`
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
dataTracking	data-tracking	An optional data tracking prop for the component.	string	undefined
form	form	An optional prop used to associate the button within a form context.	string	undefined
icon	icon	An optional prop used to pass the icon to render inside the button.	string	undefined
iconSize	icon-size	An optional prop used to control the size of the icon. Defaults to the icon size that matches the button size.	"lg" | "md" | "sm" | "xl"	undefined
isDisabled	is-disabled	An optional flag to define if the component is disabled.	boolean | string	false
isRound	is-round	An optional prop that renders the button as a circle instead of a rounded square.	boolean	false
keyPressEvent	key-press-event	An optional onKeyPress callback handler	(e: KeyboardEvent) => void	undefined
name	name	An optional value to be set to the element HTML name attribute.	string	undefined
size	size	An optional size prop for the component.	"md" | "sm" | "xs"	DHL_ICON_BUTTON.SIZE.MD
type	type	An optional type prop used to set the type of the button e.g. reset, submit or button	"button" | "reset" | "submit"	DHL_ICON_BUTTON.TYPE.BUTTON
variant	variant	An optional prop to select a component design variant.	"ghost" | "ghostBlack" | "outline" | "outlineBlack" | "primary" | "tonal"	DHL_ICON_BUTTON.VARIANT.PRIMARY

Dependencies

Depends on

• duil310-dhl-button

Graph

---

Built by DHL User Interface Library Team!