Button & Button Group

The button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

New to CSS? No problem! Buttons provide you with a very easy way to customize the style and add icons such as Facebook or Twitter.

Here's an example where you can change the button type (Explore Block):

You can find this example code at

src/pages/nft/index.tsx line 97

 <Button
                  as={Link}
                  variant="outline"
                  colorScheme="gray"
                  href={`https://viewblock.io/arweave/tx/${nft?.id}`}
                  isExternal
                  rel="noopener noreferrer"
                  size="xs"
                  rightIcon={<RiExternalLinkLine />}
                >

Properties explained:

• variant: button style

• colorScheme: Hover color

• href: url position

• isExternal: Will this button open a new tab (If not desired, just delete this property)

Check for more useful properties here: https://chakra-ui.com/docs/form/button