ViewToggle

ViewToggle is a row of filled icon squares for choosing how a list is shown: list, grid or map by default. The selected view is brand red; the others are sage and darken on hover. It is designed to sit inside a Toolbar.

Import​

<script>
  import { ViewToggle } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<script>
  import { Toolbar, ViewToggle } from '@classic-homes/theme-svelte';

  let view = $state('list');
</script>

<Toolbar label="Inventory tools">
  <span class="text-sm">89 homes</span>
  {#snippet end()}
    <ViewToggle bind:value={view} />
  {/snippet}
</Toolbar>

Custom views:

<ViewToggle
  label="Layout"
  options={[
    { value: 'table', icon: 'list', label: 'Table' },
    { value: 'cards', icon: 'grid', label: 'Cards' },
  ]}
  onValueChange={(v) => console.log(v)}
/>

Props​

Prop	Type	Default	Description
options	ViewToggleOption[]	list / grid / map	{ value, icon, label, disabled? }
value	string	First enabled option	Selected view (bindable)
onValueChange	(value: string) => void	-	Called after the selection changes
label	string	'View'	Accessible name of the group
disabled	boolean	false	Disables every option
class	string	-	Additional classes

defaultViewToggleOptions is exported if you want to extend the default set.

Styling​

• Rest: bg-secondary-soft (#969a82) with white icons; hover: bg-secondary (#6c705b); selected: bg-primary.
• The rest fill is 4.4:1 against the Toolbar background but only 2.9:1 on white, so place the control on the toolbar (or another dark surface) rather than directly on the page.

Keyboard Navigation​

• ArrowLeft / ArrowRight - Move selection between views
• Home / End - First / last view
• Tab - Leave the control

Accessibility​

• ARIA radiogroup with radio items; each item has an aria-label and title from its label.
• Roving focus: only the selected view is in the tab order.
• Icons are aria-hidden; the visible state is also conveyed by aria-checked.

Related Components​

• Toolbar - Dark control strip that hosts this control
• SegmentedControl - Text sibling for grouping / modes