Tabs

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

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

Package version

1.14.0

Loading...

<Tabs items={[ { label: 'Tab one', href: '#one', id: 'one' }, { label: 'Tab two', href: '#two', id: 'two' }, { label: 'Tab three', href: '#three', id: 'three' }, { label: 'Tab four', href: '#four', id: 'four' }, { label: 'Tab five', href: '#five', id: 'five' } ]} />

<Tabs
  items={[
    { label: 'Tab one', href: '#one', id: 'one' },
    { label: 'Tab two', href: '#two', id: 'two' },
    { label: 'Tab three', href: '#three', id: 'three' },
    { label: 'Tab four', href: '#four', id: 'four' },
    { label: 'Tab five', href: '#five', id: 'five' }
  ]}
/>

Introduction

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

Use Tabs to display a horizontal menu of tabs that change the content shown below when pressed.

If there are too many tabs to fit the horizontal space, left and right buttons are shown.

Guidance

• Use Tabs to show/hide a mutually exclusive content areas.
• If the tabs should link to a wholly different page with its own URL, use SubNavigation instead
• Recommend to use labels that are 35 characters or fewer
• Allow the use of hashes in the URL to automatically load a tab. Eg. http://t.com#premium should load the “Premium” tab
• Change the page URL to include the hash as tabs change

Accessibility

• If a user is using tabbed navigation and horizontal scrolling is required, tabbing through tabs scrolls them into view automatically
• Scrolling methods other than the scroll buttons may also be used, such as touchscreen swipes and touchpad or mousewheel scrolling
• Consider including an assertive focus effect inside content to move screenreader focus to the appropriate heading or content start when new content is rendered

Controlled usage

Pass value and onChange to control the tabs from a parent. This is usually the easiest way to render different content for different tabs:

• value should be the id property of the current tab in the items array
• onChange should be a function that updates the state that selects content and is passed to value
• To integrate with URL hashes on web so selections remain after returning to a page, choose the default state value based on the URL hash

Platform considerations

The component is available on both native platforms and web.

Touch swipes with momentum may be used to scroll through many tabs, in addition to the scroll buttons.

Keep in mind that URL hashes won't have any effect in an app.

Props

Name	Type	Default	Description
initialValue	string
items	Array<{ href: string, label: string, id: string, ref }>	[]
itemTokens	custom
onChange	func
scrollButtonTokens	custom
tokens	custom		System tokens prop, see tokens for more details
value	string
variant	objectOf		System variant prop, see variants for more details

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
tokens	nextIcon	icon
	previousIcon	icon
	space	integer
	buttonClearance	size
	gutter	size
	borderBottomColor	color
	borderBottomWidth	border
itemTokens	highlightColor	color
	highlightBarHeight	border
	highlightBarBorderRadius	radius
	highlightBarBorderWidth	border
	highlightTriangleSize	size
	backgroundColor	color
	borderColor	color
	borderWidth	border
	borderRadius	radius
	maxWidth	size
	paddingHorizontal	size
	paddingVertical	size
	space	integer
	textAlign	textAlign
	lineHeight	lineHeight
	color	color
	fontSize	fontSize
	letterSpacing	letterSpacing
	textTransform	textTransform
	fontScaleCap	fontSize
	fontName	fontName
	fontWeight	fontWeight
scrollButtonTokens	backgroundColor	color
	borderRadius	radius
	borderColor	color
	borderWidth	border
	iconColor	color
	iconSize	size
	iconScale	iconScale
	iconTranslateX	size
	iconTranslateY	size
	outerBorderWidth	border
	outerBorderColor	color
	outerBorderGap	size
	padding	size
	shadow	shadow

Figma

Variants

Inverse

• Use on dark backgrounds.

Loading...

<div style={{ backgroundColor: 'black', padding: 20 }}> <Tabs variant={{ inverse: true }} items={[ { label: 'Tab one', href: '#one', id: 'one' }, { label: 'Tab two', href: '#two', id: 'two' }, { label: 'Tab three', href: '#three', id: 'three' }, { label: 'Tab four', href: '#four', id: 'four' }, { label: 'Tab five', href: '#five', id: 'five' } ]} /> </div>

<div style={{ backgroundColor: 'black', padding: 20 }}>
  <Tabs
    variant={{ inverse: true }}
    items={[
      { label: 'Tab one', href: '#one', id: 'one' },
      { label: 'Tab two', href: '#two', id: 'two' },
      { label: 'Tab three', href: '#three', id: 'three' },
      { label: 'Tab four', href: '#four', id: 'four' },
      { label: 'Tab five', href: '#five', id: 'five' }
    ]}
  />
</div>

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