Astryx Toggle Button

Buttons 1

About

Astryx (Meta) ToggleButton — pressed/unpressed control with outline/solid icon swap: favorite, bookmark and notifications.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Astryx Toggle Button to your project and fits it to your theme.

Code

How Astryx Toggle Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {useState} from 'react';
import {ToggleButton, ToggleButtonGroup} from '@/components/ui/astryx-toggle-button';
import {Stack} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';
import {Icon} from '@astryxdesign/core/Icon';
import {ListBulletIcon, Squares2X2Icon, TableCellsIcon} from '@heroicons/react/24/outline';
import {BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon} from '@heroicons/react/24/outline';

// Standalone setup (matches apps/example-vite): the Theme provider sets
// data-astryx-theme and injects the neutral theme tokens the @scope'd CSS needs.
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';

export default function ToggleButtonGroupBlock() {
  const [view, setView] = useState<string | null>('list');
  const [formats, setFormats] = useState<string[]>(['bold']);

  return (
    <Theme theme={neutralTheme}>
    <div data-astryx-theme="neutral">
    <Stack direction="vertical" gap={4}>
      <Stack direction="vertical" gap={1}>
        <Text type="supporting" color="secondary">
          Single selection
        </Text>
        <ToggleButtonGroup value={view} onChange={setView} label="View mode">
          <ToggleButton
            value="list"
            label="List view"
            icon={<Icon icon={ListBulletIcon} />}
            isIconOnly
          />
          <ToggleButton
            value="grid"
            label="Grid view"
            icon={<Icon icon={Squares2X2Icon} />}
            isIconOnly
          />
          <ToggleButton
            value="table"
            label="Table view"
            icon={<Icon icon={TableCellsIcon} />}
            isIconOnly
          />
        </ToggleButtonGroup>
      </Stack>
      <Stack direction="vertical" gap={1}>
        <Text type="supporting" color="secondary">
          Multiple selections
        </Text>
        <ToggleButtonGroup
          type="multiple"
          value={formats}
          onChange={setFormats}
          label="Text formatting">
          <ToggleButton
            value="bold"
            label="Bold"
            icon={<Icon icon={BoldIcon} />}
            isIconOnly
          />
          <ToggleButton
            value="italic"
            label="Italic"
            icon={<Icon icon={ItalicIcon} />}
            isIconOnly
          />
          <ToggleButton
            value="underline"
            label="Underline"
            icon={<Icon icon={UnderlineIcon} />}
            isIconOnly
          />
          <ToggleButton
            value="strikethrough"
            label="Strikethrough"
            icon={<Icon icon={StrikethroughIcon} />}
            isIconOnly
          />
        </ToggleButtonGroup>
      </Stack>
    </Stack>
    </div>
    </Theme>
  );
}