FAB and extended FAB

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

export default function Fabs() {
  return (
    <>
      <Fab icon={<Icon name="edit" />} aria-label="Compose" />
      <Fab
        size="medium"
        color="secondary-container"
        icon={<Icon name="edit" />}
        aria-label="Compose"
      />
      <Fab
        size="large"
        color="tertiary-container"
        icon={<Icon name="edit" />}
        aria-label="Compose"
      />
    </>
  );
}

<button type="button" class="m3e-fab" aria-label="Compose">
  <span class="m3e-icon" aria-hidden="true">edit</span>
</button>
<button
  type="button"
  class="m3e-fab m3e-fab--size-medium m3e-fab--secondary-container"
  aria-label="Compose"
>
  <span class="m3e-icon" aria-hidden="true">edit</span>
</button>
<button
  type="button"
  class="m3e-fab m3e-fab--size-large m3e-fab--tertiary-container"
  aria-label="Compose"
>
  <span class="m3e-icon" aria-hidden="true">edit</span>
</button>

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

const COLORS = [
  'primary-container',
  'secondary-container',
  'tertiary-container',
  'primary',
  'secondary',
  'tertiary',
] as const;

export default function Colors() {
  return (
    <>
      {COLORS.map((color) => (
        <Fab
          key={color}
          color={color}
          icon={<Icon name="add" />}
          aria-label={`Create (${color})`}
        />
      ))}
    </>
  );
}

<button type="button" class="m3e-fab" aria-label="Create (primary-container)">
  <span class="m3e-icon" aria-hidden="true">add</span>
</button>
<button
  type="button"
  class="m3e-fab m3e-fab--secondary-container"
  aria-label="Create (secondary-container)"
>
  <span class="m3e-icon" aria-hidden="true">add</span>
</button>
<button
  type="button"
  class="m3e-fab m3e-fab--tertiary-container"
  aria-label="Create (tertiary-container)"
>
  <span class="m3e-icon" aria-hidden="true">add</span>
</button>
<button type="button" class="m3e-fab m3e-fab--primary" aria-label="Create (primary)">
  <span class="m3e-icon" aria-hidden="true">add</span>
</button>
<button type="button" class="m3e-fab m3e-fab--secondary" aria-label="Create (secondary)">
  <span class="m3e-icon" aria-hidden="true">add</span>
</button>
<button type="button" class="m3e-fab m3e-fab--tertiary" aria-label="Create (tertiary)">
  <span class="m3e-icon" aria-hidden="true">add</span>
</button>

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

/** Deprecated (D4): the small FAB is no longer recommended; use the baseline FAB. */
export default function LegacySmall() {
  return <Fab size="small" icon={<Icon name="edit" />} aria-label="Compose" />;
}

<!-- Deprecated (D4): the small FAB is no longer recommended; use the baseline FAB. -->
<button type="button" class="m3e-fab m3e-fab--size-small" aria-label="Compose">
  <span class="m3e-icon" aria-hidden="true">edit</span>
</button>

import { useState } from 'react';
import { ExtendedFab, Icon, Switch } from '@kyralabs/m3exp-web/react';

export default function Extended() {
  const [expanded, setExpanded] = useState(true);
  return (
    <>
      <ExtendedFab icon={<Icon name="edit" />} label="Compose" isExpanded={expanded} />
      <ExtendedFab
        size="medium"
        color="secondary"
        icon={<Icon name="navigation" />}
        label="Navigate"
      />
      <Switch isSelected={expanded} onChange={setExpanded}>
        Expanded
      </Switch>
    </>
  );
}

<button type="button" class="m3e-extended-fab">
  <span class="m3e-icon" aria-hidden="true">edit</span>
  <span class="m3e-extended-fab__label">Compose</span>
</button>
<button
  type="button"
  class="m3e-extended-fab m3e-extended-fab--size-medium m3e-extended-fab--secondary"
>
  <span class="m3e-icon" aria-hidden="true">navigation</span>
  <span class="m3e-extended-fab__label">Navigate</span>
</button>
<button type="button" class="m3e-extended-fab m3e-extended-fab--collapsed">
  <span class="m3e-icon" aria-hidden="true">edit</span>
  <span class="m3e-extended-fab__label">Compose</span>
</button>