IconButton

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/components-base

Package version

1.6.1

Loading...

<IconButton icon={ExampleIcon} onPress={() => {}} />

<IconButton icon={ExampleIcon} onPress={() => {}} />

Introduction

import { IconButton } from '@telus-uds/components-base'

IconButton can be used to control actions or navigation on pressing a universally-recognizable icon that doesn’t need visually displayed accompanying text (but may include an accessibility label for screen reader users).

The button shows the icon only.

Guidance

• Use accessibilityLabel to provide context for screen reader users
• Use iconName to set the icon: one of Add, Close, Play, Subtract, ArrowLeft, ArrowRight, CaretDown, CaretUp
• Pass a href if the IconButton should render as an <a> link with a URL as a target. Rendered semantic role may also be controlled using accessibilityRole (default role is button if href is not provided)

Accessibility

• Pass an accessibilityLabel so that the icon button is accessible to screen readers.

Props

Name	Type	Default	Description
accessibilityRole		href ? 'link' : 'button'
variant	objectOf		System variant prop, see variants for more details
tokens	custom		System tokens prop, see tokens for more details
icon*	elementType
href	string
hrefAttrs	shape
onPress	func