ToggleButton

import { Icon, ToggleButton, ToggleButtonGroup } from '@bindshq/stance-react';

export function Single() {
  return (
    <ToggleButtonGroup label="Template view" defaultValue="grid" required>
      <ToggleButton value="grid" icon={<Icon name="layout-grid" />}>
        Grid
      </ToggleButton>
      <ToggleButton value="list" icon={<Icon name="list" />}>
        List
      </ToggleButton>
    </ToggleButtonGroup>
  );
}

import { Icon, ToggleButton } from '@bindshq/stance-react';

export function Standalone() {
  return (
    <ToggleButton defaultPressed icon={<Icon name="eye" />}>
      Show placeholders
    </ToggleButton>
  );
}

import { ToggleButton, ToggleButtonGroup } from '@bindshq/stance-react';

export function Multiple() {
  return (
    <ToggleButtonGroup
      type="multiple"
      label="Show in signature"
      defaultValue={['phone', 'logo']}
      attached={false}
    >
      <ToggleButton value="phone">Phone</ToggleButton>
      <ToggleButton value="address">Address</ToggleButton>
      <ToggleButton value="logo">Logo</ToggleButton>
      <ToggleButton value="social">Social links</ToggleButton>
    </ToggleButtonGroup>
  );
}

import * as React from 'react';
import { Icon, ToggleButton, ToggleButtonGroup } from '@bindshq/stance-react';

export function Controlled() {
  const [value, setValue] = React.useState<string | null>('desktop');
  return (
    <div style={{ display: 'grid', gap: 12, justifyItems: 'start' }}>
      <ToggleButtonGroup
        label="Preview device"
        value={value}
        onValueChange={setValue}
        required
        size="sm"
      >
        <ToggleButton value="desktop" icon={<Icon name="monitor" />}>
          Desktop
        </ToggleButton>
        <ToggleButton value="mobile">Mobile</ToggleButton>
      </ToggleButtonGroup>
      <span style={{ fontSize: 14 }}>Previewing on: {value}</span>
    </div>
  );
}