Button

import { Button } from '@kyralabs/m3exp-web/react';

export default function Variants() {
  return (
    <>
      <Button variant="filled">Filled</Button>
      <Button variant="tonal">Tonal</Button>
      <Button variant="elevated">Elevated</Button>
      <Button variant="outlined">Outlined</Button>
      <Button variant="text">Text</Button>
    </>
  );
}

<button type="button" class="m3e-button m3e-button--filled">Filled</button>
<button type="button" class="m3e-button m3e-button--tonal">Tonal</button>
<button type="button" class="m3e-button m3e-button--elevated">Elevated</button>
<button type="button" class="m3e-button m3e-button--outlined">Outlined</button>
<button type="button" class="m3e-button m3e-button--text">Text</button>

import { Button, Icon } from '@kyralabs/m3exp-web/react';

export default function Sizes() {
  return (
    <>
      <Button size="xs" icon={<Icon name="add" />}>
        Extra small
      </Button>
      <Button size="s" icon={<Icon name="add" />}>
        Small
      </Button>
      <Button size="m" icon={<Icon name="add" />}>
        Medium
      </Button>
      <Button size="l" icon={<Icon name="add" />}>
        Large
      </Button>
      <Button size="xl" icon={<Icon name="add" />}>
        Extra large
      </Button>
    </>
  );
}

<button type="button" class="m3e-button m3e-button--filled m3e-button--size-xs">
  <span class="m3e-icon" aria-hidden="true">add</span>
  Extra small
</button>
<button type="button" class="m3e-button m3e-button--filled m3e-button--size-s">
  <span class="m3e-icon" aria-hidden="true">add</span>
  Small
</button>
<button type="button" class="m3e-button m3e-button--filled m3e-button--size-m">
  <span class="m3e-icon" aria-hidden="true">add</span>
  Medium
</button>
<button type="button" class="m3e-button m3e-button--filled m3e-button--size-l">
  <span class="m3e-icon" aria-hidden="true">add</span>
  Large
</button>
<button type="button" class="m3e-button m3e-button--filled m3e-button--size-xl">
  <span class="m3e-icon" aria-hidden="true">add</span>
  Extra large
</button>

import { Button } from '@kyralabs/m3exp-web/react';

export default function Shapes() {
  return (
    <>
      <Button variant="tonal" size="m" shape="round">
        Round
      </Button>
      <Button variant="tonal" size="m" shape="square">
        Square
      </Button>
    </>
  );
}

<button type="button" class="m3e-button m3e-button--tonal m3e-button--size-m">Round</button>
<button type="button" class="m3e-button m3e-button--tonal m3e-button--size-m m3e-button--square">
  Square
</button>

import { Button, Icon } from '@kyralabs/m3exp-web/react';

export default function Icons() {
  return (
    <>
      <Button variant="filled" icon={<Icon name="send" />}>
        Send
      </Button>
      <Button variant="outlined" trailingIcon={<Icon name="arrow_forward" />}>
        Next
      </Button>
    </>
  );
}

<button type="button" class="m3e-button m3e-button--filled">
  <span class="m3e-icon" aria-hidden="true">send</span>
  Send
</button>
<button type="button" class="m3e-button m3e-button--outlined">
  Next
  <span class="m3e-icon" aria-hidden="true">arrow_forward</span>
</button>

import { ToggleButton } from '@kyralabs/m3exp-web/react';

export default function Toggle() {
  return (
    <>
      <ToggleButton variant="filled">Filled</ToggleButton>
      <ToggleButton variant="tonal" defaultSelected>
        Tonal
      </ToggleButton>
      <ToggleButton variant="elevated">Elevated</ToggleButton>
      <ToggleButton variant="outlined" defaultSelected>
        Outlined
      </ToggleButton>
    </>
  );
}

<button type="button" class="m3e-button m3e-button--filled" aria-pressed="false">Filled</button>
<button type="button" class="m3e-button m3e-button--tonal" aria-pressed="true">Tonal</button>
<button type="button" class="m3e-button m3e-button--elevated" aria-pressed="false">Elevated</button>
<button type="button" class="m3e-button m3e-button--outlined" aria-pressed="true">Outlined</button>

import { Button } from '@kyralabs/m3exp-web/react';

export default function States() {
  return (
    <>
      <Button variant="filled" isDisabled>
        Disabled
      </Button>
      <Button variant="outlined" isDisabled>
        Disabled
      </Button>
      <Button variant="tonal" href="/">
        Link
      </Button>
    </>
  );
}

<button type="button" class="m3e-button m3e-button--filled" disabled>Disabled</button>
<button type="button" class="m3e-button m3e-button--outlined" disabled>Disabled</button>
<a class="m3e-button m3e-button--tonal" href="/">Link</a>