View toggle

Toggling

View toggles are used when there are just a couple options to switch between. Use a Tab component when more options exist.

import ViewToggle from '@pluralsight/ps-design-system-viewtoggle'
import React from 'react'
function Example() {
return (
<ViewToggle>
<ViewToggle.Option active>Option 1</ViewToggle.Option>
<ViewToggle.Option>Option 2</ViewToggle.Option>
</ViewToggle>
)
}
export default Example

More options

Make a toggle with up to 3 options.

import ViewToggle from '@pluralsight/ps-design-system-viewtoggle'
import React from 'react'
function Example() {
return (
<ViewToggle>
<ViewToggle.Option>Option 1</ViewToggle.Option>
<ViewToggle.Option>Option 2</ViewToggle.Option>
<ViewToggle.Option active>Option 3</ViewToggle.Option>
</ViewToggle>
)
}
export default Example

Long labels

View toggles are used when there are just a couple options to switch between. Use a Tab component when more options exist.

import ViewToggle from '@pluralsight/ps-design-system-viewtoggle'
import React from 'react'
function Example() {
return (
<ViewToggle>
<ViewToggle.Option active>Option 1</ViewToggle.Option>
<ViewToggle.Option>
Option 2 that is such long you'll never see the end of it
</ViewToggle.Option>
</ViewToggle>
)
}
export default Example

Usage & types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-viewtoggle
  • Import
    import ViewToggle from '@pluralsight/ps-design-system-viewtoggle'

ViewToggle

Name
Type
Description
Default
children
ViewToggle.Option[]
options to appear in toggle
onSelect
function
triggered when an option is clicked

ViewToggle.Options

Name
Type
Description
Default
active
boolean
marks as selected
first option is active