Prism Docs

import { ToggleGroup } from '@mylighthouse/prism-react';
import { useState } from 'react';

export default function BasicExample(): React.JSX.Element {
  const [view, setView] = useState<string[]>(['pricing']);

  return (
    <ToggleGroup aria-label="View" onValueChange={setView} value={view}>
      <ToggleGroup.Button value="pricing">Pricing</ToggleGroup.Button>
      <ToggleGroup.Button value="rate-shopper">Rate Shopper</ToggleGroup.Button>
    </ToggleGroup>
  );
}

import { Badge, Icon, ToggleGroup } from '@mylighthouse/prism-react';
import { useState } from 'react';

export default function VariantsExample(): React.JSX.Element {
  const [iconOnly, setIconOnly] = useState<string[]>(['list']);
  const [withLabel, setWithLabel] = useState<string[]>(['list']);
  const [withBadge, setWithBadge] = useState<string[]>(['pricing']);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <ToggleGroup
        aria-label="View"
        onValueChange={setIconOnly}
        value={iconOnly}
      >
        <ToggleGroup.Button aria-label="List view" value="list">
          <Icon color="inherit" name="view-list" size="small" />
        </ToggleGroup.Button>
        <ToggleGroup.Button aria-label="Grid view" value="grid">
          <Icon color="inherit" name="view-large-grid" size="small" />
        </ToggleGroup.Button>
        <ToggleGroup.Button aria-label="Table view" value="table">
          <Icon color="inherit" name="view-table" size="small" />
        </ToggleGroup.Button>
      </ToggleGroup>

      <ToggleGroup
        aria-label="View"
        onValueChange={setWithLabel}
        value={withLabel}
      >
        <ToggleGroup.Button value="list">
          <Icon color="inherit" name="view-list" size="small" />
          List
        </ToggleGroup.Button>
        <ToggleGroup.Button value="grid">
          <Icon color="inherit" name="view-large-grid" size="small" />
          Grid
        </ToggleGroup.Button>
        <ToggleGroup.Button value="table">
          <Icon color="inherit" name="view-table" size="small" />
          Table
        </ToggleGroup.Button>
      </ToggleGroup>

      <ToggleGroup
        aria-label="View"
        onValueChange={setWithBadge}
        value={withBadge}
      >
        <ToggleGroup.Button value="pricing">
          Pricing
          <Badge type="brand">New</Badge>
        </ToggleGroup.Button>
        <ToggleGroup.Button value="rate-shopper">
          Rate Shopper
        </ToggleGroup.Button>
      </ToggleGroup>
    </div>
  );
}

import { ToggleGroup } from '@mylighthouse/prism-react';
import { useState } from 'react';

export default function DisabledExample(): React.JSX.Element {
  const [view, setView] = useState<string[]>(['pricing']);

  return (
    <ToggleGroup aria-label="View" onValueChange={setView} value={view}>
      <ToggleGroup.Button value="pricing">Pricing</ToggleGroup.Button>
      <ToggleGroup.Button disabled value="rate-shopper">
        Rate Shopper
      </ToggleGroup.Button>
      <ToggleGroup.Button value="intelligence">Intelligence</ToggleGroup.Button>
    </ToggleGroup>
  );
}