Skip to main content

Button

The <Button/> component render breadcrumbs that show the user where they are in the site's hierarchy.

Source@matro-ui/Button

Import​

import { Button } from "matro-ui";
  • Button: Button component itself.

Usage​

Loading...
Live Editor
<Stack>
 <Button>Button</Button>
 <Button leftIcon={<IoMailUnreadOutline/>}>Button</Button>
</Stack>

Styling​


Color​

To change the color of the <Button/>, simply pass the hue(MDN Docs) prop to it:

Loading...
Live Editor
<Stack>
   <Button hue="100">Button</Button>
   <Button hue="200" leftIcon={<IoMailUnreadOutline/>}>Button</Button>
   <Button hue="240" leftIcon={<Spinner size="XS"/>}>Button</Button>
</Stack>

Glossy​

To make the button "glossy", add the glossy prop to it:

Loading...
Live Editor
<Stack>
   <Button colorScheme="black" glossy>Button</Button>
   <Button leftIcon={<IoMailUnreadOutline/>} hue="160" glossy>Button</Button>
</Stack>

Icon​

To add the Icon to the <Button/>, simply pass it to the leftIcon or rightIcon prop:

Loading...
Live Editor
<Stack column>
   <Button 
     leftIcon={<PiGear size="21" style={{margin: "0 -1px 0 -1px"}}/>} 
     hue="260"
   >
   User Settings
   </Button>

   <Button 
     leftIcon={<PiBluetooth size="20" style={{margin: "0 -3px 0 1px"}}/>}  
     hue="200"
   >
     Bluetooth
   </Button>
</Stack>

Only Icon button​

If you want to make a Button with only Icon inside, use isIcon prop to set it right spacing to 0:

Loading...
Live Editor
//  import { PiGear } from "react-icons/pi";

 <Button
   leftIcon={<PiGear size="21" style={{margin: "0 -1px 0 -1px"}}/>} 
   hue="260"
   isIcon
 />