Button group

Button group cho phép ta lựa chọn một trong nhiều options giống <Select> nhưng có UI hiển thị dang inline

Ví dụ

import { ButtonGroup, ButtonGroupOption } from '@xobuilder/ui';

export const Demo = () => {
 const [value, setValue] = useState<string>('');

 const options: ButtonGroupOption[] = [
  { value: 'center', label: 'Center' },
  { value: 'left', label: 'Left' },
  { value: 'right', label: 'Right' },
 ]
  return (
    <ButtonGroup value={value} options={options} onChange={setValue} />
  )
}

ButtonGroupOption Props

Name	Type	Default	Description
value	string | string[]	-	Value của button option
icon	IconProps['name']	-	Icon của button option
label	string	-	Label của button option

ButtonGroupProps Props

Name	Type	Default	Description
options	ButtonGroupOption[]	-	List options của button group
value	string	-	Value của button group
tooltipEnabled	boolean	false	Nếu tooltip được bật thì label sẽ hiển thị theo kiểu tooltip
onChange	(value: string) => void	-	Callback thay đổi giá trị