ToggleButtonNew

Import

import { ToggleButton } from '@heroui/react';

Usage

import {Heart} from "@gravity-ui/icons";
import {ToggleButton} from "@heroui/react";

export function Basic() {
  return (

Variants

import {Heart} from "@gravity-ui/icons";
import {ToggleButton} from "@heroui/react";

export function Variants() {
  return (

Icon Only

import {Bookmark, Heart} from "@gravity-ui/icons";
import {ToggleButton} from "@heroui/react";

export function IconOnly() {
  return (

Sizes

import {Heart} from "@gravity-ui/icons";
import {ToggleButton} from "@heroui/react";

export function Sizes() {
  return (

Controlled

"use client";

import {Heart, HeartFill} from "@gravity-ui/icons";
import {ToggleButton} from "@heroui/react";
import {useState} from "react";

Disabled

import {Heart, HeartFill} from "@gravity-ui/icons";
import {ToggleButton} from "@heroui/react";

export function Disabled() {
  return (

Styling

Passing Tailwind CSS classes

import { ToggleButton } from '@heroui/react';

function CustomToggleButton() {
  return (
    <ToggleButton className="bg-purple-500 text-white">
      Toggle
    </ToggleButton>
  );
}

Customizing the component classes

To customize the ToggleButton component classes, you can use the @layer components directive.
Learn more.

@layer components {
  .toggle-button {
    @apply bg-purple-500 text-white;
  }

  .toggle-button--icon-only {
    @apply rounded-lg;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The ToggleButton component uses these CSS classes (View source styles):

Base & Size Classes

• .toggle-button - Base toggle button styles
• .toggle-button--sm - Small size variant
• .toggle-button--md - Medium size variant (default)
• .toggle-button--lg - Large size variant

Variant Classes

• .toggle-button--default - Default variant with filled background
• .toggle-button--ghost - Ghost variant with transparent background

Modifier Classes

• .toggle-button--icon-only - Icon-only toggle button
• .toggle-button--icon-only.toggle-button--sm - Small icon-only
• .toggle-button--icon-only.toggle-button--lg - Large icon-only

Interactive States

The toggle button supports both CSS pseudo-classes and data attributes for flexibility:

• Selected: [data-selected="true"] (accent background and foreground)
• Hover: :hover or [data-hovered="true"]
• Active/Pressed: :active or [data-pressed="true"] (includes scale transform)
• Focus: :focus-visible or [data-focus-visible="true"] (shows focus ring)
• Disabled: :disabled or [aria-disabled="true"] (reduced opacity, no pointer events)

API Reference

ToggleButton Props

Inherits from React Aria ToggleButton.

ToggleButtonRenderProps

When using the render prop pattern, these values are provided: