Segment Control

import React, { useState } from 'react';
import { Segment } from '@skeletonlabs/skeleton-react';
import { AlignLeft as IconLeft, AlignCenter as IconCenter, AlignRight as IconRight, AlignJustify as IconJustify } from 'lucide-react';

export const Page: React.FC = () => {
  const [align, setAlign] = useState('left');

  return (
    <Segment value={align} name="align" onValueChange={(e) => setAlign(e.value!)}>
      <Segment.Item value="left">
        <IconLeft />
      </Segment.Item>
      <Segment.Item value="center">
        <IconCenter />
      </Segment.Item>
      <Segment.Item value="right">
        <IconRight />
      </Segment.Item>
      <Segment.Item value="justify">
        <IconJustify />
      </Segment.Item>
    </Segment>
  );
};

import React, { useState } from 'react';
import { Segment } from '@skeletonlabs/skeleton-react';

export const Page: React.FC = () => {
  const [size, setSize] = useState('sm');

  return (
    <Segment name="size" value={size} onValueChange={(e) => setSize(e.value!)} disabled>
      <Segment.Item value="sm">sm</Segment.Item>
      <Segment.Item value="md">md</Segment.Item>
      <Segment.Item value="lg">lg</Segment.Item>
    </Segment>
  );
};

import React, { useState } from 'react';
import { Segment } from '@skeletonlabs/skeleton-react';

export const Page: React.FC = () => {
  const [size, setSize] = useState('sm');

  return (
    <Segment name="size" value={size} onValueChange={(e) => setSize(e.value!)}>
      <Segment.Item value="sm">sm</Segment.Item>
      <Segment.Item value="md" disabled>
        md
      </Segment.Item>
      <Segment.Item value="lg">lg</Segment.Item>
    </Segment>
  );
};

import React, { useState } from 'react';
import { Segment } from '@skeletonlabs/skeleton-react';

export const Page: React.FC = () => {
  const [size, setSize] = useState('sm');

  return (
    <Segment name="size" value={size} onValueChange={(e) => setSize(e.value!)} readOnly>
      <Segment.Item value="sm">sm</Segment.Item>
      <Segment.Item value="md">md</Segment.Item>
      <Segment.Item value="lg">lg</Segment.Item>
    </Segment>
  );
};

import React, { useState } from 'react';
import { Segment } from '@skeletonlabs/skeleton-react';

export const Page: React.FC = () => {
  const [size, setSize] = useState('sm');

  return (
    <Segment name="size" value={size} onValueChange={(e) => setSize(e.value!)} orientation="vertical">
      <Segment.Item value="sm">Small</Segment.Item>
      <Segment.Item value="md">Medium</Segment.Item>
      <Segment.Item value="lg">Large</Segment.Item>
    </Segment>
  );
};

<nav class="btn-group preset-outlined-surface-200-800 flex-col p-2 md:flex-row">
  <button type="button" class="btn preset-filled">January</button>
  <button type="button" class="btn hover:preset-tonal">February</button>
  <button type="button" class="btn hover:preset-tonal">March</button>
</nav>