React Chakra UI Button with two text, big and smaller

Question

is it possible in Chakra UI, to build a button that has

• text
• a smaller text ?

See the image with the output I have to reach:

My code so far is this:

import { Button } from '@chakra-ui/react'

import {
  Button,
  DocumentIcon,
  DownloadIcon,
  Menu,
  MenuButton
} from '@custom/mantle-ui'

<Menu> 
  <MenuButton
    aria-label="Single Report with all"
    as={Button}
    colorScheme="gray"
    iconSpacing={0}
    leftIcon={<DocumentIcon />}
    rightIcon={<DownloadIcon />}
    size="sm"
    variant="solidLight"
  >
    Report per asset
  </MenuButton>
  </Menu>

Where Button is this component: Chakra UI Button

Where Menu is this component: Chakra UI Menu

Where MenuButton is this component: MenuButton

mantle-ui button menu

With this code, the visual result is this:

Answer 1

I don't really understand your purpose with MenuButton but I am assuming you want to add both texts to the MenuButton

  <MenuButton as={Button} rightIcon={<ChevronDownIcon />} display="block">
    <Text fontSize="xl" fontWeight="black">
      Big text
    </Text>
    <Text fontSize="sm">Sub text</Text>
  </MenuButton>