<Stack spacing='10'>
<ButtonGroup variant='solid' colorScheme='primary'>
<Button leftIcon={<Icon><path d={mdiInformationOutline} /></Icon>}>Primary</Button>
<Button>Primary</Button>
<Button isActive>isActive</Button>
<Button isDisabled>isDisabled</Button>
<Button isLoading loadingText='isLoading'>Primary</Button>
</ButtonGroup>
<ButtonGroup variant='solid' colorScheme='danger'>
<Button leftIcon={<Icon><path d={mdiInformationOutline} /></Icon>}>Warning</Button>
<Button>Warning</Button>
<Button isActive>isActive</Button>
<Button isDisabled>isDisabled</Button>
<Button isLoading loadingText='isLoading'>Warning</Button>
</ButtonGroup>
<ButtonGroup variant='outline' colorScheme='primary'>
<Button leftIcon={<Icon><path d={mdiInformationOutline} /></Icon>}>Outlined</Button>
<Button>Outlined</Button>
<Button isActive>isActive</Button>
<Button isDisabled>isDisabled</Button>
<Button isLoading loadingText='isLoading'>Outlined</Button>
</ButtonGroup>
<ButtonGroup variant='outline' colorScheme='neutral'>
<Button leftIcon={<Icon><path d={mdiInformationOutline} /></Icon>}>Rounded</Button>
<Button>Rounded</Button>
<Button isActive>isActive</Button>
<Button isDisabled>isDisabled</Button>
<Button isLoading loadingText='isLoading'>Rounded</Button>
</ButtonGroup>
<ButtonGroup variant='ghost' colorScheme='neutral'>
<Button leftIcon={<Icon><path d={mdiInformationOutline} /></Icon>}>Basic</Button>
<Button>Basic</Button>
<Button isActive>isActive</Button>
<Button isDisabled>isDisabled</Button>
<Button isLoading loadingText='isLoading'>Basic</Button>
</ButtonGroup>
<ButtonGroup variant='ghost' colorScheme='primary'>
<Button leftIcon={<Icon><path d={mdiInformationOutline} /></Icon>}>Sliding</Button>
<Button>Sliding</Button>
<Button isActive>isActive</Button>
<Button isDisabled>isDisabled</Button>
<Button isLoading loadingText='isLoading'>Sliding</Button>
</ButtonGroup>
</Stack>