<Stack spacing="6">
<Wrap align="center">
  <Button leftIcon={<Icon><path d={mdiInformationOutline} /></Icon>} size="lg">Solid lg</Button>
  <Button leftIcon={<Icon><path d={mdiInformationOutline} /></Icon>}>Solid</Button>
  <Button leftIcon={<Icon><path d={mdiInformationOutline} /></Icon>} size="sm">Solid sm</Button>
  <Button leftIcon={<Icon><path d={mdiInformationOutline} /></Icon>} size="xs">Solid xs</Button>
</Wrap>
<Wrap align="center">
  <Button>Solid</Button>
  <Button isActive>isActive</Button>
  <Button isDisabled>isDisabled</Button>
  <Button isLoading loadingText="isLoading">Solid</Button>
</Wrap>
<Wrap align="center">
  <Button colorScheme="success">Solid success</Button>
  <Button colorScheme="success" isActive>isActive</Button>
  <Button colorScheme="success" isDisabled>isDisabled</Button>
  <Button colorScheme="success" isLoading loadingText="isLoading">Solid success</Button>
</Wrap>
<Wrap align="center">
  <Button colorScheme="danger">Solid danger</Button>
  <Button colorScheme="danger" isActive>isActive</Button>
  <Button colorScheme="danger" isDisabled>isDisabled</Button>
  <Button colorScheme="danger" isLoading loadingText="isLoading">Solid danger</Button>
</Wrap>
<Wrap align="center">
  <Button colorScheme="neutral">Solid neutral</Button>
  <Button colorScheme="neutral" isActive>isActive</Button>
  <Button colorScheme="neutral" isDisabled>isDisabled</Button>
  <Button colorScheme="neutral" isLoading loadingText="isLoading">Solid neutral</Button>
</Wrap>
<Divider />
<Wrap align="center">
  <Button variant="outline" leftIcon={<Icon><path d={mdiInformationOutline} /></Icon>} size="lg">Outline lg</Button>
  <Button variant="outline" leftIcon={<Icon><path d={mdiInformationOutline} /></Icon>}>Outline</Button>
  <Button variant="outline" leftIcon={<Icon><path d={mdiInformationOutline} /></Icon>} size="sm">Outline sm</Button>
  <Button variant="outline" leftIcon={<Icon><path d={mdiInformationOutline} /></Icon>} size="xs">Outline xs</Button>
</Wrap>
<Wrap align="center">
  <Button variant="outline">Outline</Button>
  <Button variant="outline" isActive>isActive</Button>
  <Button variant="outline" isDisabled>isDisabled</Button>
  <Button variant="outline" isLoading loadingText="isLoading">Outline</Button>
</Wrap>
<Wrap align="center">
  <Button variant="outline" colorScheme="primary">Outline primary</Button>
  <Button variant="outline" colorScheme="primary" isActive>isActive</Button>
  <Button variant="outline" colorScheme="primary" isDisabled>isDisabled</Button>
  <Button variant="outline" colorScheme="primary" isLoading loadingText="isLoading">Outline primary</Button>
</Wrap>
<Wrap align="center">
  <Button variant="outline" colorScheme="danger">Outline danger</Button>
  <Button variant="outline" colorScheme="danger" isActive>isActive</Button>
  <Button variant="outline" colorScheme="danger" isDisabled>isDisabled</Button>
  <Button variant="outline" colorScheme="danger" isLoading loadingText="isLoading">Outline danger</Button>
</Wrap>
<Divider />
<Wrap align="center">
  <Button variant="ghost" leftIcon={<Icon><path d={mdiInformationOutline} /></Icon>} size="lg">Ghost lg</Button>
  <Button variant="ghost" leftIcon={<Icon><path d={mdiInformationOutline} /></Icon>}>Ghost</Button>
  <Button variant="ghost" leftIcon={<Icon><path d={mdiInformationOutline} /></Icon>} size="sm">Ghost sm</Button>
  <Button variant="ghost" leftIcon={<Icon><path d={mdiInformationOutline} /></Icon>} size="xs">Ghost xs</Button>
</Wrap>
<Wrap align="center">
  <Button variant="ghost">Ghost</Button>
  <Button variant="ghost" isActive>isActive</Button>
  <Button variant="ghost" isDisabled>isDisabled</Button>
  <Button variant="ghost" isLoading loadingText="isLoading">Ghost</Button>
</Wrap>
<Wrap align="center">
  <Button variant="ghost" colorScheme="primary">Ghost primary</Button>
  <Button variant="ghost" colorScheme="primary" isActive>isActive</Button>
  <Button variant="ghost" colorScheme="primary" isDisabled>isDisabled</Button>
  <Button variant="ghost" colorScheme="primary" isLoading loadingText="isLoading">Ghost primary</Button>
</Wrap>
<Wrap align="center">
  <Button variant="ghost" colorScheme="danger">Ghost danger</Button>
  <Button variant="ghost" colorScheme="danger" isActive>isActive</Button>
  <Button variant="ghost" colorScheme="danger" isDisabled>isDisabled</Button>
  <Button variant="ghost" colorScheme="danger" isLoading loadingText="isLoading">Ghost danger</Button>
</Wrap>
<Divider />
<Wrap align="center">
  <Button variant="link" size="lg">Link lg</Button>
  <Button variant="link">Link</Button>
  <Button variant="link" size="sm">Link sm</Button>
  <Button variant="link" size="xs">Link xs</Button>
</Wrap>
<Wrap align="center">
  <Button variant="link">Link</Button>
  <Button variant="link" isActive>isActive</Button>
  <Button variant="link" isDisabled>isDisabled</Button>
  <Button variant="link" isLoading loadingText="isLoading">Link</Button>
</Wrap>
<Wrap align="center">
  <Button variant="link" colorScheme="success">Link success</Button>
  <Button variant="link" colorScheme="success" isActive>isActive</Button>
  <Button variant="link" colorScheme="success" isDisabled>isDisabled</Button>
  <Button variant="link" colorScheme="success" isLoading loadingText="isLoading">Link success</Button>
</Wrap>
<Wrap align="center">
  <Button variant="link" colorScheme="danger">Link danger</Button>
  <Button variant="link" colorScheme="danger" isActive>isActive</Button>
  <Button variant="link" colorScheme="danger" isDisabled>isDisabled</Button>
  <Button variant="link" colorScheme="danger" isLoading loadingText="isLoading">Link danger</Button>
</Wrap>
<Wrap align="center">
  <Button variant="link" colorScheme="neutral">Link neutral</Button>
  <Button variant="link" colorScheme="neutral" isActive>isActive</Button>
  <Button variant="link" colorScheme="neutral" isDisabled>isDisabled</Button>
  <Button variant="link" colorScheme="neutral" isLoading loadingText="isLoading">Link neutral</Button>
</Wrap>
<Divider />
<Wrap align="center">
  <Button variant="toggle">Toggle</Button>
  <Button variant="toggle" isActive>isActive</Button>
  <Button variant="toggle" isDisabled>isDisabled</Button>
  <Button variant="toggle" isLoading loadingText="isLoading">AI</Button>
</Wrap>
<Divider />
<Wrap align="center">
  <Button variant="ai">AI</Button>
  <Button variant="ai" isActive>isActive</Button>
  <Button variant="ai" isDisabled>isDisabled</Button>
  <Button variant="ai" isLoading loadingText="isLoading">AI</Button>
</Wrap>
<Divider />
<Wrap align="center">
  <Button variant="ghostColorOnHover" colorScheme="danger">Ghost danger (hover)</Button>
  <Button variant="ghostColorOnHover" colorScheme="danger" isActive>isActive</Button>
  <Button variant="ghostColorOnHover" colorScheme="danger" isDisabled>isDisabled</Button>
  <Button variant="ghostColorOnHover" colorScheme="danger" isLoading loadingText="isLoading">AI</Button>
</Wrap>
<Wrap align="center">
  <Button variant="ghostColorOnHover" colorScheme="success">Ghost success (hover)</Button>
  <Button variant="ghostColorOnHover" colorScheme="success" isActive>isActive</Button>
  <Button variant="ghostColorOnHover" colorScheme="success" isDisabled>isDisabled</Button>
  <Button variant="ghostColorOnHover" colorScheme="success" isLoading loadingText="isLoading">AI</Button>
</Wrap>
<Divider />
<Wrap align="center">
  <Button variant="filter">Filter</Button>
  <Button variant="filter" isActive>isActive</Button>
  <Button variant="filter" isDisabled>isDisabled</Button>
  <Button variant="filter" isLoading loadingText="isLoading">AI</Button>
</Wrap>
<Divider />
<Wrap align="center">
  <Button variant="navigation">Navigation</Button>
  <Button variant="navigation" isActive>isActive</Button>
  <Button variant="navigation" isDisabled>isDisabled</Button>
  <Button variant="navigation" isLoading loadingText="isLoading">AI</Button>
</Wrap>
<Divider />
<Wrap align="center">
  <Button variant="solid" shadow="md">FAB Solid</Button>
  <Button variant="ghost" shadow="md" bg="chakra-body-bg">FAB Ghost</Button>
</Wrap>
</Stack>