Button

Usage

variant

import Button from '@mavvy/m3-ui/Button';

...

<Button variant="outlined">outlined</Button>
<Button variant="elevated">elevated</Button>
<Button variant="filled" color="primary">filled</Button>
<Button variant="text">text</Button>
<Button variant="fab">fab</Button>

size

<Button size="small">small</Button>
<Button>medium</Button>
<Button size="large">large</Button>

color

See Color Reference

<Button color="primary" variant="outlined">primary</Button>
<Button color="primary" variant="filled">primary</Button>
<Button color="primary" variant="elevated">primary</Button>

Custom Example

  <Button
    icon=""
    variant="elevated"
    color="tertiary"
    className="!bg-error"
    iconClassName="!text-sky-400 after:content-['token'] group-hover:after:!content-['fullscreen\_exit'] group-hover:!text-orange-400 group-hover:rotate-45 !text-4xl group-active:scale-75 group-active:!text-blue-700"
    size="medium"
    reversed
  >
    Elevated Custom
  </Button>

Preview

Props

prop	type	description
variant	outlined|elevated|filled|text|fab	button variant. default text
size	small|medium|large	button size. default medium
color	color	button color
disabled	boolean	disables the button
vertical	boolean	arrangement of icon and button text on y axis
reversed	boolean	if true - reversed ararngement of icon and text
className	string	className of the button container
style	object	style of the button container
textClassName	string	className of the button's Text component
iconClassName	string	className of the button's Icon component
stateClassName	string	className of the button's state div
icon	string	icon name
iconVariant	IconVariant	variant of the icon
buttonAttrs	object	props to override or extend the button props
textAttrs	object	props to override or extend the button's Text component props
iconButton	boolean	render button as icon button - no text will be shown
selected	boolean	set button as selected
selectable	boolean	set button as selectable
RenderComponent	React Component	render a react component as children of the button

Reference

Material 3 Button Reference