Version:

Install ​

shell
npm i @mate-react/button

Import ​

tsx
import { MateButton } from '@mate-react/button';

Variants ​

Primary ​

tsx
<MateButton theme="primary" onClick={e => console.log(e)}>Primary</MateButton>

Secondary ​

tsx
<MateButton>Secondary</MateButton>

Tertiary ​

tsx
<MateButton theme="tertiary">Tertiary</MateButton>

Success ​

tsx
<MateButton theme="success">Success</MateButton>

Error / Danger ​

tsx
<MateButton theme="error">Error</MateButton>

Disabled ​

tsx
<MateButton disabled>Disabled</MateButton>

Icon ​

tsx
<MateButton theme="icon">
  <span theme="icon" role="img" aria-label="add aria label">add</span>
</MateButton>

WARNING

Do not use aria labels on icon and button at the same time, as they both will be read out! Same goes for grid cells, when they contain actions.

Prefix Icon ​

tsx
<MateButton>
  <span theme="icon" role="img" slot="prefix">chevron_left</span>
  <span>Backward</span>
</MateButton>

Suffix Icon ​

tsx
<MateButton>
  <span>Forward</span>
  <span theme="icon" role="img" slot="suffix">chevron_right</span>
</MateButton>

Icon unstyled ​

tsx
<MateButton theme="icon unstyled">
  <span theme="icon" role="img">add</span>
</MateButton>