Usage

import { Switch } from '@pillar-ui/core'

<Switch />

Examples

Size

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'

import { Switch } from '@pillar-ui/core'

export const SwitchSize = () => {
  return (
    <>
      <Switch label="Hello" size="1" />
      <Switch label="Hello" size="2" />
      <Switch label="Hello" size="3" />
      <Switch label="Hello" size="4" />
      <Switch label="Hello" size="5" />
      <Switch label="Hello" size="6" />
      <Switch label="Hello" size="7" />
      <Switch label="Hello" size="8" />
      <Switch label="Hello" size="9" />
    </>
  )
}

Color

Default

p

Type

'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'

import { Switch } from '@pillar-ui/core'

export const SwitchColor = () => {
  return (
    <>
      <Switch label="Hello" color="d" />
      <Switch label="Hello" color="w" />
      <Switch label="Hello" color="su" />
      <Switch label="Hello" color="p" />
      <Switch label="Hello" color="se" />
      <Switch label="Hello" color="b" />
      <Switch label="Hello" color="i" />
    </>
  )
}

DefaultPressed

Default

false

Type

boolean

import { Switch } from '@pillar-ui/core'

export const SwitchDefaultPressed = () => {
  return (
    <>
      <Switch label="Hello" defaultPressed color="d" />
      <Switch label="Hello" defaultPressed color="w" />
      <Switch label="Hello" defaultPressed color="su" />
      <Switch label="Hello" defaultPressed color="p" />
      <Switch label="Hello" defaultPressed color="se" />
      <Switch label="Hello" defaultPressed color="b" />
      <Switch label="Hello" defaultPressed color="i" />
    </>
  )
}

Corner

Default

full

Type

'0' | '1' | '2' | '3' | '4' | '5' | 'full'

import { Switch } from '@pillar-ui/core'

export const SwitchCorner = () => {
  return (
    <>
      <Switch label="Hello" corner="0" />
      <Switch label="Hello" corner="1" />
      <Switch label="Hello" corner="2" />
      <Switch label="Hello" corner="3" />
      <Switch label="Hello" corner="4" />
      <Switch label="Hello" corner="5" />
      <Switch label="Hello" corner="full" />
    </>
  )
}

Disabled

Default

false

Type

boolean

import { Switch } from '@pillar-ui/core'

export const SwitchDisabled = () => {
  return (
    <>
      <Switch label="Hello" disabled />
      <Switch label="Hello" disabled defaultPressed />
    </>
  )
}

Controlled

'use client'

import { Button, Flex, Switch } from '@pillar-ui/core'
import { useState } from 'react'

export const SwitchControlled = () => {
  const [pressed, setPressed] = useState(false)

  function onPressedChange() {
    setPressed((pressed) => !pressed)
  }
  return (
    <Flex gap="8" items="center">
      <Button onClick={onPressedChange}>{pressed ? 'Pressed' : 'Unpressed'} The Switch</Button>
      <Switch color="d" label="hello" pressed={pressed} onPressedChange={onPressedChange} />
    </Flex>
  )
}

Customizing Appearance

Our design system uses CSS variables to set default styles for components. You can customize these variables to change the overall look of your component accross your project.

Available Properties:

/* Change the default corner of the Button */
--switch-rad:;
/* Change the default size of the Button */
--switch-size:;