react-daisyui icon indicating copy to clipboard operation
react-daisyui copied to clipboard

Allow Button accept Link as custom component

Open khanhhaquang opened this issue 2 years ago • 4 comments

Currently there no choice to custom Button to be Link from react-router.

Expected like: <Button component={<Link to='/somewhere' />} />

khanhhaquang avatar Jun 21 '22 07:06 khanhhaquang

Hi @khanhhaquang,

The correct way to do this would be like so:

<Link to="/somewhere">
     <Button>
          Click me
     </Button>
 </Link>

If you believe adding the component prop would be valuable you are welcome to open a PR. Typically, react-daisyui tries to be as close to semantic HTML as possible, but if a new prop offers a huge value-add (or is common enough in other component libraries) then I would be happy to merge it in.

I'm curious where you got that specific prop from, do you have a reference from another component library that you're referring to?

benjitrosch avatar Jun 21 '22 14:06 benjitrosch

Surely it's a solution, but nested button in anchor is not match with HTML5 standard, reference to this

khanhhaquang avatar Jun 21 '22 14:06 khanhhaquang

Sorry, you are correct, I was not thinking when I wrote that comment! 😅

In some ways this relates to #108 because we fundamentally lack a way to use a <Button /> with an anchor internally (unless an href is passed in, and even then with limited functionality). A solution that allows us to render an anchor tag would make the button suitable for use with react-router.

btw: am I correct that the component prop you're referencing is from material-ui?

benjitrosch avatar Jun 21 '22 17:06 benjitrosch

Sorry, you are correct, I was not thinking when I wrote that comment! 😅

In some ways this relates to #108 because we fundamentally lack a way to use a <Button /> with an anchor internally (unless an href is passed in, and even then with limited functionality). A solution that allows us to render an anchor tag would make the button suitable for use with react-router.

btw: am I correct that the component prop you're referencing is from material-ui?

Hi Benji, actually it's just an popup idea to custom the wrapper as a Component.

Another solution for this case is using navigate function instead of Link from react-router . I think you're right, not that worth to implement just for this case.

khanhhaquang avatar Jun 23 '22 06:06 khanhhaquang