TextButton

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

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

Package version

1.6.1

Loading...

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

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

Introduction

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

TextButton is a component with the visual appearance of a link, but the semantics/behaviour of a button.

Guidance

Use TextButton for simple actions within the current page. The result of the action is clear from the label to avoid confusion with Links.

Alternatives

Do not use TextButton for:

• Actions that represent a major part of a user's action flow: consider Button
• Choices presented as calls to action: consider ButtonLink
• One navigation action that represents the user's logical next step: consider ChevronLink
• Links that navigate to another page: 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={3}> <Typography>Your account credit is $0.00.</Typography> <TextButton onPress={() => {}}> Refresh <A11yText text="account credit" /> </TextButton> </StackView>

<StackView space={3}>
  <Typography>Your account credit is $0.00.</Typography>
  <TextButton onPress={() => {}}>
    Refresh
    <A11yText text="account credit" />
  </TextButton>
</StackView>

TextButton accepts React Native's accessibility props (web docs, native docs).

Props

Name	Type	Default	Description
accessibilityRole		'button'
onPress*	func