Skip to content

Content Switcher

Content switcher allows the user to manipulate page content, switching between options, and by default one option is always selected. Use content switcher in pages with exclusive options, allowing the user to select one per time.

Best practices

  • Consider using Buttons best practices to labels.
  • By default, there's always an option selected.
import { Button, ButtonGroup } from '@lemonade/ui'
import React from 'react'

function ContentSwitchDemo() {
  return (
    <ButtonGroup>
      <Button size='small' kind='primary'>
        First content
      </Button>
      <Button size='small'>Second content</Button>
      <Button size='small' disabled>
        Third content disabled
      </Button>
    </ButtonGroup>
  )
}

export default ContentSwitchDemo