Button

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

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

Package version

1.6.1

Loading...

<Button onPress={() => alert('Hello world!')}>Click me</Button>

<Button onPress={() => alert('Hello world!')}>Click me</Button>

Introduction

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

Buttons allow users to perform an action.

They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.

Guidance

Provide a function as the onPress prop to perform an action when clicked.

• Use buttons to move through a transaction
• Aim to use only one primary button variant per page
• Keep the text short and precise. It should fit on a single line (our recommendation is 2-24 characters for French and English)
• Make sure the button text describes an action
• Buttons should not be disabled. Use inline (on blur) error messaging, to provide feedback when the form is invalid

Alternatives

Do not use Button for:

• Navigating to a URL which represents a choice in the current action flow: consider ButtonLink
• One navigation action taking the user to a page that is the only logical next step: consider ChevronLink
• Smaller actions that occur within the current page or screen: consider TextButton
• Navigating to a page outside of the user's current action flow: consider Link

Accessibility

Insert A11yText any time an interactive element's label lacks context that a sighted user would see in the content around it. Many users of assistive technology explore a page by cycling through the interactive elements first.

Loading...

<StackView space={2}> <Typography>The new MegaPhone is our loudest phone yet.</Typography> <Button variant={{ priority: 'high' }} onPress={() => {}}> Add {<A11yText text="MegaPhone" />}to cart </Button> </StackView>

<StackView space={2}>
  <Typography>The new MegaPhone is our loudest phone yet.</Typography>
  <Button variant={{ priority: 'high' }} onPress={() => {}}>
    Add {<A11yText text="MegaPhone" />}to cart
  </Button>
</StackView>

Button is by default described to accessibility tools as having the button role. Button accepts React Native's accessibility props (web docs, native docs).

Platform considerations

Button background animated transitions are not currently supported in iOS or Android apps. Focus states are not well supported on native platforms.

Props

Name	Type	Default	Description
tokens	custom		System tokens prop, see tokens for more details
inactive	bool		If true, prevents the button from being pressed, changes the cursor (on web) and accessibility attributes to communicate this to the user, and applies `inactive: true` appearances from the theme
disabled	bool		Alias for `inactive`
children	custom		Button's children must be either: - One or more text strings and / or A11yText components - A render function with contents that responds to current button state by being passed an object of: ``` { hovered<bool>, focused<bool>, pressed<bool>, inactive<bool>, selected<bool>, textStyles<RNStyle> } ```
onPress	func		Function called when the button is pressed. Required unless the button has a href.
variant	objectOf		System variant prop, see variants for more details

Note: this component also handles all React Native accessibility props