Toggle buttons

<VStack spacing='16' align='left'>

    <HStack spacing='8'>

        <ButtonGroup variant='toggle' size='sm' spacing='1'>
            <Tooltip label='Grid view'><IconButton icon={<Icon><path d={mdiViewModuleOutline} /></Icon>} /></Tooltip>
            <Tooltip label='List view'><IconButton icon={<Icon><path d={mdiViewListOutline} /></Icon>} isActive /></Tooltip>
            <Tooltip label='Board view'><IconButton icon={<Icon><path d={mdiViewColumnOutline} /></Icon>} /></Tooltip>
        </ButtonGroup>

        <ButtonGroup variant='toggle' size='sm' spacing='1'>
            <Button>Grid view</Button>
            <Button isActive>List view</Button>
            <Button>Board view</Button>
        </ButtonGroup>

        <ButtonGroup variant='toggle' size='sm' spacing='1'>
            <Button leftIcon={<Icon><path d={mdiViewModuleOutline} /></Icon>}>Grid view</Button>
            <Button leftIcon={<Icon><path d={mdiViewListOutline} /></Icon>} isActive>List view</Button>
            <Button leftIcon={<Icon><path d={mdiViewColumnOutline} /></Icon>}>Board view</Button>
        </ButtonGroup>

    </HStack>

    <HStack spacing='8'>

        <ButtonGroup variant='toggle' size='sm'  layerStyle='toggleGroup' >
            <Tooltip label='Grid view'><IconButton icon={<Icon><path d={mdiViewModuleOutline} /></Icon>} /></Tooltip>
            <Tooltip label='List view'><IconButton icon={<Icon><path d={mdiViewListOutline} /></Icon>} isActive /></Tooltip>
            <Tooltip label='Board view'><IconButton icon={<Icon><path d={mdiViewColumnOutline} /></Icon>} /></Tooltip>
        </ButtonGroup>

        <ButtonGroup variant='toggle' size='sm'  layerStyle='toggleGroup'>
            <Button>Grid view</Button>
            <Button isActive>List view</Button>
            <Button>Board view</Button>
        </ButtonGroup>

        <ButtonGroup variant='toggle' size='sm'  layerStyle='toggleGroup'>
            <Button leftIcon={<Icon><path d={mdiViewModuleOutline} /></Icon>}>Grid view</Button>
            <Button leftIcon={<Icon><path d={mdiViewListOutline} /></Icon>} isActive>List view</Button>
            <Button leftIcon={<Icon><path d={mdiViewColumnOutline} /></Icon>}>Board view</Button>
        </ButtonGroup>

    </HStack>
    <Divider />

        <HStack spacing='8'>

            <ButtonGroup variant='toggleSquare' size='xs'>
                <Tooltip label='Grid view'><IconButton icon={<Icon><path d={mdiViewModuleOutline} /></Icon>} /></Tooltip>
                <Tooltip label='List view'><IconButton icon={<Icon><path d={mdiViewListOutline} /></Icon>} isActive /></Tooltip>
                <Tooltip label='Board view'><IconButton icon={<Icon><path d={mdiViewColumnOutline} /></Icon>} /></Tooltip>
            </ButtonGroup>

            <ButtonGroup variant='toggleSquare' size='xs'>
                <Button>Grid view</Button>
                <Button isActive>List view</Button>
                <Button>Board view</Button>
            </ButtonGroup>

            <ButtonGroup variant='toggleSquare' size='xs'>
                <Button leftIcon={<Icon><path d={mdiViewModuleOutline} /></Icon>}>Grid view</Button>
                <Button leftIcon={<Icon><path d={mdiViewListOutline} /></Icon>} isActive>List view</Button>
                <Button leftIcon={<Icon><path d={mdiViewColumnOutline} /></Icon>}>Board view</Button>
            </ButtonGroup>

        </HStack>

        <HStack spacing='8'>

            <ButtonGroup variant='toggleSquare' size='sm'>
                <Tooltip label='Grid view'><IconButton icon={<Icon><path d={mdiViewModuleOutline} /></Icon>} /></Tooltip>
                <Tooltip label='List view'><IconButton icon={<Icon><path d={mdiViewListOutline} /></Icon>} isActive /></Tooltip>
                <Tooltip label='Board view'><IconButton icon={<Icon><path d={mdiViewColumnOutline} /></Icon>} /></Tooltip>
            </ButtonGroup>

            <ButtonGroup variant='toggleSquare' size='sm'>
                <Button>Grid view</Button>
                <Button isActive>List view</Button>
                <Button>Board view</Button>
            </ButtonGroup>

            <ButtonGroup variant='toggleSquare' size='sm'>
                <Button leftIcon={<Icon><path d={mdiViewModuleOutline} /></Icon>}>Grid view</Button>
                <Button leftIcon={<Icon><path d={mdiViewListOutline} /></Icon>} isActive>List view</Button>
                <Button leftIcon={<Icon><path d={mdiViewColumnOutline} /></Icon>}>Board view</Button>
            </ButtonGroup>

        </HStack>

        <HStack spacing='8'>

            <ButtonGroup variant='toggleSquare' size='sm'  layerStyle='toggleGroupSquare' >
                <Tooltip label='Grid view'><IconButton icon={<Icon><path d={mdiViewModuleOutline} /></Icon>} /></Tooltip>
                <Tooltip label='List view'><IconButton icon={<Icon><path d={mdiViewListOutline} /></Icon>} isActive /></Tooltip>
                <Tooltip label='Board view'><IconButton icon={<Icon><path d={mdiViewColumnOutline} /></Icon>} /></Tooltip>
            </ButtonGroup>

            <ButtonGroup variant='toggleSquare' size='sm'  layerStyle='toggleGroupSquare'>
                <Button>Grid view</Button>
                <Button isActive>List view</Button>
                <Button>Board view</Button>
            </ButtonGroup>

            <ButtonGroup variant='toggleSquare' size='sm'  layerStyle='toggleGroupSquare'>
                <Button leftIcon={<Icon><path d={mdiViewModuleOutline} /></Icon>}>Grid view</Button>
                <Button leftIcon={<Icon><path d={mdiViewListOutline} /></Icon>} isActive>List view</Button>
                <Button leftIcon={<Icon><path d={mdiViewColumnOutline} /></Icon>}>Board view</Button>
            </ButtonGroup>

        </HStack>

</VStack>