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} 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 {StarIcon as StarOutline, BookmarkIcon as BookmarkOutline, BellIcon, BellSlashIcon} from '@heroicons/react/24/outline';
import {StarIcon as StarSolid, BookmarkIcon as BookmarkSolid} from '@heroicons/react/24/solid';

// 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 ToggleButtonIconSwap() {
  const [isFavorited, setIsFavorited] = useState(false);
  const [isBookmarked, setIsBookmarked] = useState(true);
  const [isMuted, setIsMuted] = useState(false);

  return (
    <Theme theme={neutralTheme}>
    <div data-astryx-theme="neutral">
    <Stack direction="vertical" gap={4}>
      <Text type="supporting" color="secondary">
        Outline → solid icon swap on press
      </Text>
      <Stack direction="horizontal" gap={3} vAlign="center">
        <ToggleButton
          label="Favorite"
          icon={<Icon icon={StarOutline} />}
          pressedIcon={<Icon icon={StarSolid} />}
          isPressed={isFavorited}
          onPressedChange={setIsFavorited}
          isIconOnly
        />
        <ToggleButton
          label="Bookmark"
          icon={<Icon icon={BookmarkOutline} />}
          pressedIcon={<Icon icon={BookmarkSolid} />}
          isPressed={isBookmarked}
          onPressedChange={setIsBookmarked}
          isIconOnly
        />
        <ToggleButton
          label={isMuted ? 'Unmute notifications' : 'Mute notifications'}
          icon={<Icon icon={BellIcon} />}
          pressedIcon={<Icon icon={BellSlashIcon} />}
          isPressed={isMuted}
          onPressedChange={setIsMuted}
          isIconOnly
        />
      </Stack>
    </Stack>
    </div>
    </Theme>
  );
}