Button Group | Community Components - 21st | 21st

//Button Group/

Loading preview...

Components•ShadcnStudio•Button Group

Button Group

Here is Button Group component

Created by

@ShadcnStudio

Installation

npx shadcn@latest add https://21st.dev/r/ShadcnStudio/button-group

How to use

'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

Dependencies

Website

shadcnstudio.com/docs/components/calendar

Created 10/14/2025Updated 10/14/2025