Button Group

Buttons 4

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 { MinusIcon, PlusIcon } from 'lucide-react'

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

const ButtonGroupNumberDemo = () => {
  const [value, setValue] = useState(216)

  return (
    <div className='divide-primary-foreground/30 inline-flex w-fit divide-x rounded-md shadow-xs'>
      <Button
        size='icon'
        className='rounded-none rounded-l-full shadow-none focus-visible:z-10'
        onClick={() => {
          setValue(value - 1)
        }}
      >
        <MinusIcon />
        <span className='sr-only'>Minus</span>
      </Button>
      <span className='bg-primary text-primary-foreground inline-flex items-center px-3 py-2 text-sm font-medium'>
        {`${value}px`}
      </span>
      <Button
        size='icon'
        className='rounded-none rounded-r-full shadow-none focus-visible:z-10'
        onClick={() => {
          setValue(value + 1)
        }}
      >
        <PlusIcon />
        <span className='sr-only'>Plus</span>
      </Button>
    </div>
  )
}

export default ButtonGroupNumberDemo