ToggleButtonGroup

PreviousNext
Docs
react-ariaui

Preview

Loading preview…
components/ui/ToggleButtonGroup.tsx
'use client';
import React from 'react';
import { composeRenderProps, ToggleButtonGroup as RACToggleButtonGroup, ToggleButtonGroupProps } from 'react-aria-components';
import { tv } from 'tailwind-variants';

const styles = tv({
  base: 'flex gap-1',
  variants: {
    orientation: {
      horizontal: 'flex-row',
      vertical: 'flex-col'
    }
  }
});

export function ToggleButtonGroup(props: ToggleButtonGroupProps) {
  return (
    <RACToggleButtonGroup
      {...props}
      className={composeRenderProps(props.className, (className, renderProps) => styles({...renderProps, className}))} />
  );
}

Installation

npx shadcn@latest add @react-aria/tailwind-togglebuttongroup

Usage

import { TailwindTogglebuttongroup } from "@/components/ui/tailwind-togglebuttongroup"
<TailwindTogglebuttongroup />