Buttons

Examples of combining @theme-ui/components to create and style buttons.

Numeric Label

A side by side button alongside a NavLink to another location.

<Flex sx={{ border: '1px solid', borderColor: 'primary', width: 'fit-content', borderRadius: 3, cursor: 'pointer' }}>
  <Flex sx={{placeItems: 'center'}}>
    <Button sx={{display: 'flex', alignItems: 'center', borderTopRightRadius: 0, borderBottomRightRadius: 0}}>
      <svg sx={{ mr: 1 }} viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
      Like
    </Button>
  </Flex>
  <Flex sx={{ placeItems: 'center' }}>
    <NavLink sx={{ borderRadius: '3' }}>
      2459
    </NavLink>
  </Flex>
</Flex>
<Flex sx={{ border: '1px solid', borderColor: 'primary', width: 'fit-content', borderRadius: 3, cursor: 'pointer' }}>
  <Flex sx={{placeItems: 'center'}}>
    <Button sx={{display: 'flex', alignItems: 'center', borderTopRightRadius: 0, borderBottomRightRadius: 0}}>
      <svg sx={{ mr: 1 }} viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
      Like
    </Button>
  </Flex>
  <Flex sx={{ placeItems: 'center' }}>
    <NavLink sx={{ borderRadius: '3' }}>
      2459
    </NavLink>
  </Flex>
</Flex>

Icon Button

Theme UI includes an IconButton component.

<IconButton
  aria-label='Toggle dark mode'>
  <svg sx={{ fill: 'text', height: '14px', width: '14px'}} viewBox="0 0 20 20">
    <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/>
  </svg>
</IconButton>
<IconButton
  aria-label='Toggle dark mode'>
  <svg sx={{ fill: 'text', height: '14px', width: '14px'}} viewBox="0 0 20 20">
    <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/>
  </svg>
</IconButton>

Labeled Buttons

SVG elements can be used inside other elements and styled with the sx prop as well.

<Button>
  <svg sx={{ height: '14px', width: '14px', fill: 'background', marginRight: 1 }} viewBox="0 0 20 20">
    <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/>
  </svg>
  Download
</Button>
<Button>
  <svg sx={{ height: '14px', width: '14px', fill: 'background', marginRight: 1 }} viewBox="0 0 20 20">
    <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/>
  </svg>
  Download
</Button>