IconButton

Library

Allium Design Systemweb-only

Repository

github.com/telus/allium-design-system

Package

npmjs.com/package/@telus-uds/ds-allium

Package version

1.14.0

Loading...

<IconButton iconName="Add" onPress={() => {}} />

<IconButton iconName="Add" onPress={() => {}} />

Introduction

import { IconButton } from '@telus-uds/ds-allium'

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, which is limited to a sub-set of icons (Add, Close, PlayVideo, Subtract, ArrowLeft, ArrowRight, CaretDown, CaretUp).

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)

Loading...

<Box space={4}> <StackView space={4} direction="row"> <IconButton iconName="Add" href="https://telus.com" /> <IconButton iconName="Close" href="https://telus.com" /> <IconButton iconName="Play" href="https://telus.com" /> <IconButton iconName="Subtract" href="https://telus.com" /> <IconButton iconName="ArrowLeft" href="https://telus.com" /> <IconButton iconName="ArrowRight" href="https://telus.com" /> <IconButton iconName="CaretDown" href="https://telus.com" /> <IconButton iconName="CaretUp" href="https://telus.com" /> </StackView> </Box>

<Box space={4}>
  <StackView space={4} direction="row">
    <IconButton iconName="Add" href="https://telus.com" />
    <IconButton iconName="Close" href="https://telus.com" />
    <IconButton iconName="Play" href="https://telus.com" />
    <IconButton iconName="Subtract" href="https://telus.com" />
    <IconButton iconName="ArrowLeft" href="https://telus.com" />
    <IconButton iconName="ArrowRight" href="https://telus.com" />
    <IconButton iconName="CaretDown" href="https://telus.com" />
    <IconButton iconName="CaretUp" href="https://telus.com" />
  </StackView>
</Box>

Accessibility

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

Platform considerations

The version of IconButton bundled in @telus-uds/ds-allium is intended only for web use and is set up for common web iconography.

A cross-platform version of IconButton is available from @telus-uds/components-base. It does not prescribe specific icons, so should be used as a base on to which platform-specific or cross-platform components are built that restrict use to a subset of platform-appropraite icons.

Props

Name	Type	Default	Description
icon	() => {}
iconName*	"Add" | "Subtract" | "Close" | "Play" | "CaretUp" | "CaretDown" | "ChevronLeft" | "ChevronRight" | "ArrowLeft" | "ArrowRight"

Figma

Variants

There are three sizes available (default, small, large) and "inverse" and "raised" stylistic variants.

Default

The default choice on light backgrounds.

Loading...

<Box space={4}> <StackView space={4} direction="row"> <IconButton iconName="Add" onPress={() => {}} variant={{ size: 'small' }} /> <IconButton iconName="Add" onPress={() => {}} /> <IconButton iconName="Add" onPress={() => {}} variant={{ size: 'large' }} /> </StackView> </Box>

<Box space={4}>
  <StackView space={4} direction="row">
    <IconButton iconName="Add" onPress={() => {}} variant={{ size: 'small' }} />
    <IconButton iconName="Add" onPress={() => {}} />
    <IconButton iconName="Add" onPress={() => {}} variant={{ size: 'large' }} />
  </StackView>
</Box>

Inverse

A light icon button for use on dark backgrounds.

Loading...

<Box space={4} variant={{ background: 'darkest' }}> <StackView space={4} direction="row"> <IconButton iconName="Add" onPress={() => {}} variant={{ inverse: true, size: 'small' }} /> <IconButton iconName="Add" onPress={() => {}} variant={{ inverse: true }} /> <IconButton iconName="Add" onPress={() => {}} variant={{ inverse: true, size: 'large' }} /> </StackView> </Box>

<Box space={4} variant={{ background: 'darkest' }}>
  <StackView space={4} direction="row">
    <IconButton iconName="Add" onPress={() => {}} variant={{ inverse: true, size: 'small' }} />
    <IconButton iconName="Add" onPress={() => {}} variant={{ inverse: true }} />
    <IconButton iconName="Add" onPress={() => {}} variant={{ inverse: true, size: 'large' }} />
  </StackView>
</Box>

Raised

Uses a solid background and shadow effect, for sitting above other content.

Loading...

<Box space={4} background="darkest"> <StackView space={4} direction="row"> <IconButton iconName="Add" onPress={() => {}} variant={{ raised: true, size: 'small' }} /> <IconButton iconName="Add" onPress={() => {}} variant={{ raised: true }} /> <IconButton iconName="Add" onPress={() => {}} variant={{ raised: true, size: 'large' }} /> </StackView> </Box>

<Box space={4} background="darkest">
  <StackView space={4} direction="row">
    <IconButton iconName="Add" onPress={() => {}} variant={{ raised: true, size: 'small' }} />
    <IconButton iconName="Add" onPress={() => {}} variant={{ raised: true }} />
    <IconButton iconName="Add" onPress={() => {}} variant={{ raised: true, size: 'large' }} />
  </StackView>
</Box>

Feedback

• Spotted a problem with this component? Raise an issue on GitHub
• See any existing issues for this component
• Contact the team on slack in #ds-allium-support