Daniele Carta.

Chakra UI - A perfect button link

Simple tip to improve ui of button link in Chakra UI

The goal of this article is show to you how to improve the UX of the component Button. When you want to use the 'component' Button with the prop variant link and the prop as a. I want to show you a real example.

The example:

<Button 
 as='a' 
 variant='link' 
 href='#' 
> 
 Github Actions: How to deploy a React Application to Netlify 
</Button>

The result will be:

Now, I want to show you a simple tip to improve this component with two props, whiteSpace and wordBreak.

<Button 
 as='a' 
 variant='link' 
 href='#' 
 whiteSpace='normal' 
 wordBreak='break-word'
> 
 Github Actions: How to deploy a React Application to Netlify 
</Button>

The result will be: