TextButton

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

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

Package version

1.14.0

Loading...

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

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

Introduction

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

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

For TextButtons that show and hide a collapsible section of (web) content, consider ExpandCollapseMini

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={noop}> Refresh <A11yText text="account credit" /> </TextButton> </StackView>

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

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

Platform considerations

The component is available on both native platforms and web.

Props

Name	Type	Default	Description
accessibilityRole		'button'
onPress*	func

Tokens

In exceptional circumstances, the following tokens can be passed to this component to override its default styles. Do not do this unless absolutely necessary. Read more about overriding styles.

View Tokens

Prop Name	Token Property	Token Type

Figma

Variants

TextButton's variants are the same as for Link.

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