ButtonGroup

그룹화된 버튼들의 요소입니다.

Example

It can only be viewed in a mobile.

Copy Code

components/ButtonGroup/index.tsx

export interface Props {
  list: string[]
  onClick: (key: number) => void
}
 
function ButtonGroup({ list, onClick }: Props) {
  return (
    <div className="inline-flex divide-x rounded border bg-white dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-800">
      {list.map((name, key) => (
        <button
          className="hover:text-primary px-3 py-2 text-sm text-neutral-400 first:rounded-l last:rounded-r hover:bg-blue-50 dark:hover:bg-blue-200/30"
          key={key}
          onClick={() => onClick(key)}
        >
          {name}
        </button>
      ))}
    </div>
  )
}
 
export default ButtonGroup

Usage

<Button.Group
  list={['One', 'Two', 'Three', 'Four']}
  onClick={(key) => alert(`Key: ${key}`)}
/>

Props

Name	Type	Default
list	string[]
onClick	(key: number) => void

Breadcrumbs Button