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={setAlign}>
			<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={setSize} 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={setSize}>
			<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={setSize} 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={setSize} 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>