Button Group

Buttons 6

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 { ZoomInIcon, ZoomOutIcon } from 'lucide-react'

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

const ButtonGroupZoomDemo = () => {
  const [zoom, setZoom] = useState(95)

  const handleZoomIn = () => {
    if (zoom < 100) {
      setZoom(zoom + 5)
    }
  }

  const handleZoomOut = () => {
    if (zoom > 0) {
      setZoom(zoom - 5)
    }
  }

  return (
    <div className='inline-flex w-fit -space-x-px rounded-md shadow-xs rtl:space-x-reverse'>
      <Button
        variant='outline'
        size='icon'
        className='rounded-none rounded-l-md shadow-none focus-visible:z-10'
        onClick={handleZoomOut}
        disabled={zoom === 0}
      >
        <ZoomOutIcon  size={18}/>
        <span className='sr-only' >Zoom out</span>
      </Button>
      <span className='bg-background dark:border-input dark:bg-input/30 flex items-center border px-3 text-sm font-medium'>
        {`${zoom}%`}
      </span>
      <Button
        variant='outline'
        size='icon'
        className='rounded-none rounded-r-md shadow-none focus-visible:z-10'
        onClick={handleZoomIn}
        disabled={zoom === 100}
      >
        <ZoomInIcon size={18} />
        <span className='sr-only'>Zoom in</span>
      </Button>
    </div>
  )
}

export default ButtonGroupZoomDemo