Buttons

Button Group#

Button 1Button 2
const CustomButton = props => (
  <Button bg="gray.300" borderWidth={0} {...props} />
);

render(
  <Flex>
    <CustomButton radiusRight={0}>Button 1</CustomButton>
    <CustomButton radiusLeft={0}>Button 2</CustomButton>
  </Flex>
);
const CustomButton = props => (
  <Button bg="gray.300" borderWidth={0} {...props} />
);
render(
  <Flex>
    <CustomButton radiusRight={0}>Button 1</CustomButton>
    <CustomButton radiusLeft={0}>Button 2</CustomButton>
  </Flex>
);

Button with Icon#

 InboxSave 
<Stack horizontal>
  <Button>
    <Icon name="mail" mr={2} size="16px" /> Inbox
  </Button>
  <Button>
    Save <Icon name="save" ml={2} size="16px" />
  </Button>
</Stack>
<Stack horizontal>
  <Button>
    <Icon name="mail" mr={2} size="16px" /> Inbox
  </Button>
  <Button>
    Save <Icon name="save" ml={2} size="16px" />
  </Button>
</Stack>

Pagination#

12345
const buttonStyles = {
  borderRadius: 0,
  fontWeight: 400,
  marginLeft: '-1px',
};

render(
  <>
    <Button {...buttonStyles} radiusLeft="md" px={2}>
      <Icon name="chevron-left" size="20px" height="100%" />
    </Button>
    <Button {...buttonStyles}>1</Button>
    <Button {...buttonStyles} fontWeight={800}>
      2
    </Button>
    <Button {...buttonStyles}>3</Button>
    <Button {...buttonStyles}>4</Button>
    <Button {...buttonStyles}>5</Button>
    <Button {...buttonStyles} radiusRight="md" px={2}>
      <Icon name="chevron-right" size="20px" height="100%" />
    </Button>
  </>
);
const buttonStyles = {
  borderRadius: 0,
  fontWeight: 400,
  marginLeft: '-1px',
};
render(
  <>
    <Button {...buttonStyles} radiusLeft="md" px={2}>
      <Icon name="chevron-left" size="20px" height="100%" />
    </Button>
    <Button {...buttonStyles}>1</Button>
    <Button {...buttonStyles} fontWeight={800}>
      2
    </Button>
    <Button {...buttonStyles}>3</Button>
    <Button {...buttonStyles}>4</Button>
    <Button {...buttonStyles}>5</Button>
    <Button {...buttonStyles} radiusRight="md" px={2}>
      <Icon name="chevron-right" size="20px" height="100%" />
    </Button>
  </>
);

Button Hover Styles#

Hover Button
<Button
  _hover={{
    bg: 'purple.800',
    borderColor: 'purple.800',
    color: '#fff',
  }}
  _active={{
    bg: 'purple.900',
    borderColor: 'purple.900',
  }}
>
  Hover Button
</Button>
<Button
  _hover={{
    bg: 'purple.800',
    borderColor: 'purple.800',
    color: '#fff',
  }}
  _active={{
    bg: 'purple.900',
    borderColor: 'purple.900',
  }}
>
  Hover Button
</Button>

Button Pill#

Button Pill
<Button borderRadius="full">Button Pill</Button>
<Button borderRadius="full">Button Pill</Button>

Button with Shadow#

Shadow Button
<Button boxShadow="base">Shadow Button</Button>
<Button boxShadow="base">Shadow Button</Button>

Custom Image Button#

Send message to Dave
<Button boxShadow="base">
  <Image
    src="https://images.unsplash.com/photo-1553798194-cc0213ae7f99?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"
    borderRadius="full"
    w="3rem"
    h="3rem"
    objectFit="cover"
    marginRight="1rem"
  />
  Send message to Dave
</Button>
<Button boxShadow="base">
  <Image
    src="https://images.unsplash.com/photo-1553798194-cc0213ae7f99?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"
    borderRadius="full"
    w="3rem"
    h="3rem"
    objectFit="cover"
    marginRight="1rem"
  />
  Send message to Dave
</Button>

Button with Animated Styles#

Click here!
<Button
  _active={{
    transform: 'translateY(2px)',
  }}
>
  Click here!
</Button>
<Button
  _active={{
    transform: 'translateY(2px)',
  }}
>
  Click here!
</Button>