Skip to main content

Link as button

The <LinkButton/> component render link as button that allows to use <a> tag without breaking W3C markup rules.

Source@matro-ui/LinkButton

Import​

import { LinkButton } from "matro-ui";
  • LinkButton: The LinkButton component itself

Usage​

Loading...
Live Editor
 <LinkButton 
   as={<a href="https://example.com" target="_blank"></a>}
 >
  Hi! I'm a Link myself 👋🏾
 </LinkButton>

react-router-dom​

You can also use it as a wrapper to a react-router-dom <Link/>, or other navigation component

Loading...
Live Editor
 <LinkButton as={<Link to="#"/>}>
  LinkButton as {`<Link/>`}
 </LinkButton>

Icon​

<Button/> specification allows us to add a custom Icon, by simply using leftIcon or rightIcon prop (val: any):

Loading...
Live Editor
 <LinkButton 
   as={<Link to="#"/>} 
   leftIcon={<IoLayersOutline color="darkturquoise"/>}
 >
   LinkButton as {`<Link/>`}
 </LinkButton>