Astryx Toggle Button

Buttons

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 {EyeIcon, EyeSlashIcon, FunnelIcon, MapPinIcon} 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 ToggleButtonLabel() {
  const [isVisible, setIsVisible] = useState(true);
  const [filters, setFilters] = useState<string[]>([]);

  return (
    <Theme theme={neutralTheme}>
    <div data-astryx-theme="neutral">
    <Stack direction="vertical" gap={4}>
      <Stack direction="vertical" gap={1}>
        <Text type="supporting" color="secondary">
          Standalone with label and icon
        </Text>
        <Stack direction="horizontal" gap={3} vAlign="center">
          <ToggleButton
            label="Visible"
            icon={<Icon icon={EyeIcon} />}
            pressedIcon={<Icon icon={EyeSlashIcon} />}
            isPressed={isVisible}
            onPressedChange={setIsVisible}>
            {isVisible ? 'Visible' : 'Hidden'}
          </ToggleButton>
        </Stack>
      </Stack>
      <Stack direction="vertical" gap={1}>
        <Text type="supporting" color="secondary">
          Labeled group — filter toolbar
        </Text>
        <ToggleButtonGroup
          type="multiple"
          value={filters}
          onChange={setFilters}
          label="Filters">
          <ToggleButton
            value="filter"
            label="Filter"
            icon={<Icon icon={FunnelIcon} />}>
            Filter
          </ToggleButton>
          <ToggleButton
            value="nearby"
            label="Nearby"
            icon={<Icon icon={MapPinIcon} />}>
            Nearby
          </ToggleButton>
        </ToggleButtonGroup>
      </Stack>
    </Stack>
    </div>
    </Theme>
  );
}