Button Group

Buttons 7

About

Here is Button Group component

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

Code

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

Usage.tsx

'use client'

import { useState } from 'react'

import { HeartIcon } from 'lucide-react'

import { Button } from '@/components/ui/button'

import { cn } from '@/lib/utils'

const ButtonGroupLikeDemo = () => {
  const [isLiked, setIsLiked] = useState(true)

  return (
    <div className='inline-flex w-fit -space-x-px rounded-md shadow-xs rtl:space-x-reverse'>
      <Button
        variant='outline'
        className='btn rounded-none rounded-l-md shadow-none focus-visible:z-10'
        onClick={() => setIsLiked(!isLiked)}
      >
        <HeartIcon className={cn({ 'icon fill-destructive stroke-destructive': isLiked })} />
        Like
      </Button>
      <span className='bg-background dark:border-input dark:bg-input/30 flex items-center rounded-r-md border px-3 text-sm font-medium'>
        {isLiked ? 46 : 45}
      </span>
    </div>
  )
}

export default ButtonGroupLikeDemo