<Stack spacing="6">
    <Wrap align="center">
        <Tooltip label="Solid lg">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                size="lg"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="Solid">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="Solid sm">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                size="sm"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="Solid xs">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                size="xs"
                aria-label={''}
            />
        </Tooltip>
    </Wrap>
    <Wrap align="center">
        <Tooltip label="Solid">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isActive">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                isActive
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isDisabled">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                isDisabled
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isLoading">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                isLoading
                aria-label={''}
            />
        </Tooltip>
    </Wrap>
    <Wrap align="center">
        <Tooltip label="Solid success">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                colorScheme="success"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isActive">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                colorScheme="success"
                isActive
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isDisabled">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                colorScheme="success"
                isDisabled
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isLoading">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                colorScheme="success"
                isLoading
                aria-label={''}
            />
        </Tooltip>
    </Wrap>
    <Wrap align="center">
        <Tooltip label="Solid danger">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                colorScheme="danger"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isActive">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                colorScheme="danger"
                isActive
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isDisabled">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                colorScheme="danger"
                isDisabled
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isLoading">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                colorScheme="danger"
                isLoading
                aria-label={''}
            />
        </Tooltip>
    </Wrap>
    <Wrap align="center">
        <Tooltip label="Solid neutral">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                colorScheme="neutral"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isActive">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                colorScheme="neutral"
                isActive
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isDisabled">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                colorScheme="neutral"
                isDisabled
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isLoading">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                colorScheme="neutral"
                isLoading
                aria-label={''}
            />
        </Tooltip>
    </Wrap>
    <Wrap align="center">
        <Tooltip label="Solid gray">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                colorScheme="gray"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isActive">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                colorScheme="gray"
                isActive
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isDisabled">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                colorScheme="gray"
                isDisabled
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isLoading">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                colorScheme="gray"
                isLoading
                aria-label={''}
            />
        </Tooltip>
    </Wrap>
    <Divider />
    <Wrap align="center">
        <Tooltip label="Outline lg">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="outline"
                size="lg"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="Outline">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="outline"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="Outline sm">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="outline"
                size="sm"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="Outline xs">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="outline"
                size="xs"
                aria-label={''}
            />
        </Tooltip>
    </Wrap>
    <Wrap align="center">
        <Tooltip label="Outline">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="outline"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isActive">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="outline"
                isActive
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isDisabled">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="outline"
                isDisabled
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isLoading">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="outline"
                isLoading
                aria-label={''}
            />
        </Tooltip>
    </Wrap>
    <Divider />
    <Wrap align="center">
        <Tooltip label="Ghost lg">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="ghost"
                size="lg"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="Ghost">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="ghost"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="Ghost sm">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="ghost"
                size="sm"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="Ghost xs">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="ghost"
                size="xs"
                aria-label={''}
            />
        </Tooltip>
    </Wrap>
    <Wrap align="center">
        <Tooltip label="Ghost">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="ghost"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isActive">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="ghost"
                isActive
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isDisabled">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="ghost"
                isDisabled
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isLoading">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="ghost"
                isLoading
                aria-label={''}
            />
        </Tooltip>
    </Wrap>
    <Wrap align="center">
        <Tooltip label="Ghost primary">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="ghost"
                colorScheme="primary"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isActive">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="ghost"
                colorScheme="primary"
                isActive
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isDisabled">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="ghost"
                colorScheme="primary"
                isDisabled
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isLoading">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="ghost"
                colorScheme="primary"
                isLoading
                aria-label={''}
            />
        </Tooltip>
    </Wrap>
    <Wrap align="center">
        <Tooltip label="Ghost danger">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="ghost"
                colorScheme="danger"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isActive">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="ghost"
                colorScheme="danger"
                isActive
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isDisabled">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="ghost"
                colorScheme="danger"
                isDisabled
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isLoading">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiInformationOutline} />
                    </Icon>
                }
                variant="ghost"
                colorScheme="danger"
                isLoading
                aria-label={''}
            />
        </Tooltip>
    </Wrap>
    <Divider />
    <Wrap align="center">
        <Tooltip label="Toggle">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiCodeTags} />
                    </Icon>
                }
                variant="toggle"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isActive">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiCodeTags} />
                    </Icon>
                }
                variant="toggle"
                isActive
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isDisabled">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiCodeTags} />
                    </Icon>
                }
                variant="toggle"
                isDisabled
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isLoading">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiCodeTags} />
                    </Icon>
                }
                variant="toggle"
                isLoading
                aria-label={''}
            />
        </Tooltip>
    </Wrap>
    <Divider />
    <Wrap align="center">
        <Tooltip label="AI">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiCreation} />
                    </Icon>
                }
                variant="ai"
                colorScheme="danger"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isActive">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiCreation} />
                    </Icon>
                }
                variant="ai"
                isActive
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isDisabled">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiCreation} />
                    </Icon>
                }
                variant="ai"
                isDisabled
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isLoading">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiCreation} />
                    </Icon>
                }
                variant="ai"
                isLoading
                aria-label={''}
            />
        </Tooltip>
    </Wrap>
    <Divider />
    <Wrap align="center">
        <Tooltip label="Ghost danger (hover)">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiTrashCanOutline} />
                    </Icon>
                }
                variant="ghostColorOnHover"
                colorScheme="danger"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isActive">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiTrashCanOutline} />
                    </Icon>
                }
                variant="ghostColorOnHover"
                colorScheme="danger"
                isActive
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isDisabled">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiTrashCanOutline} />
                    </Icon>
                }
                variant="ghostColorOnHover"
                colorScheme="danger"
                isDisabled
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isLoading">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiTrashCanOutline} />
                    </Icon>
                }
                variant="ghostColorOnHover"
                colorScheme="danger"
                isLoading
                aria-label={''}
            />
        </Tooltip>
    </Wrap>
    <Wrap align="center">
        <Tooltip label="Ghost success (hover)">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiCheck} />
                    </Icon>
                }
                variant="ghostColorOnHover"
                colorScheme="success"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isActive">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiCheck} />
                    </Icon>
                }
                variant="ghostColorOnHover"
                colorScheme="success"
                isActive
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isDisabled">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiCheck} />
                    </Icon>
                }
                variant="ghostColorOnHover"
                colorScheme="success"
                isDisabled
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="isLoading">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiCheck} />
                    </Icon>
                }
                variant="ghostColorOnHover"
                colorScheme="success"
                isLoading
                aria-label={''}
            />
        </Tooltip>
    </Wrap>
    <Divider />
    <Wrap align="center">
        <Tooltip label="FAB Solid">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiPlus} />
                    </Icon>
                }
                variant="solid"
                shadow="md"
                aria-label={''}
            />
        </Tooltip>
        <Tooltip label="FAB Ghost">
            <IconButton
                icon={
                    <Icon>
                        <path d={mdiPlus} />
                    </Icon>
                }
                variant="ghost"
                shadow="md"
                bg="chakra-body-bg"
                aria-label={''}
            />
        </Tooltip>
    </Wrap>
</Stack>