IconButton 10.16.0

ARIA

RTL

Buttons allow users to take actions, and make choices, with a single tap.

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

Modal windows
Forms
Cards
Toolbars

Default

"use client";

import { IconButton } from "@heathmont/moon-core-tw";
import { OtherFrame } from "@heathmont/moon-icons-tw";

const Default = () => (
  <IconButton
    onClick={() => alert("click")}
    icon={<OtherFrame />}
    data-testid="button"
  />
);

export default Default;

Sizes

"use client";

import { IconButton } from "@heathmont/moon-core-tw";
import { OtherFrame } from "@heathmont/moon-icons-tw";

const Sizes = () => (
  <>
    <IconButton
      data-testid="button-xs"
      size="xs"
      icon={<OtherFrame />}
      onClick={() => alert("click")}
    />
    <IconButton
      data-testid="button-sm"
      size="sm"
      icon={<OtherFrame />}
      onClick={() => alert("click")}
    />
    <IconButton
      data-testid="button-md"
      icon={<OtherFrame />}
      onClick={() => alert("click")}
    />
    <IconButton
      data-testid="button-lg"
      size="lg"
      icon={<OtherFrame />}
      onClick={() => alert("click")}
    />
    <IconButton
      data-testid="button-xl"
      size="xl"
      icon={<OtherFrame />}
      onClick={() => alert("click")}
    />
  </>
);

export default Sizes;

Disabled

"use client";

import { IconButton } from "@heathmont/moon-core-tw";
import { OtherFrame } from "@heathmont/moon-icons-tw";

const Disabled = () => (
  <IconButton
    disabled
    icon={<OtherFrame />}
    data-testid="button"
    onClick={() => {
      alert("No one will see me");
    }}
  />
);

export default Disabled;

Animations

"use client";

import { IconButton } from "@heathmont/moon-core-tw";
import { OtherFrame } from "@heathmont/moon-icons-tw";

const Animations = () => (
  <>
    <IconButton
      animation="progress"
      icon={<OtherFrame />}
      onClick={() => alert("progress click")}
      data-testid="button-progress"
    />
    <IconButton
      animation="success"
      icon={<OtherFrame />}
      onClick={() => alert("success click")}
      data-testid="button-success"
    />
    <IconButton
      animation="error"
      icon={<OtherFrame />}
      onClick={() => alert("error click")}
      data-testid="button-error"
    />
    <IconButton
      animation="pulse"
      icon={<OtherFrame />}
      onClick={() => alert("pulse click")}
      data-testid="button-pulse"
    />
  </>
);

export default Animations;

Button as a link HTML element

"use client";

import { IconButton } from "@heathmont/moon-core-tw";
import { OtherFrame } from "@heathmont/moon-icons-tw";

const ButtonAsALinkHTML = () => (
  <IconButton as="a" href="#click" icon={<OtherFrame />} data-testid="button" />
);

export default ButtonAsALinkHTML;

Variants

"use client";

import { IconButton } from "@heathmont/moon-core-tw";
import { OtherFrame } from "@heathmont/moon-icons-tw";

const Example = () => (
  <>
    <IconButton
      icon={<OtherFrame />}
      data-testid="button"
      onClick={() => alert("click")}
    />
    <IconButton
      variant="outline"
      icon={<OtherFrame />}
      data-testid="button-outline"
      onClick={() => alert("click")}
    />
    <IconButton
      variant="ghost"
      icon={<OtherFrame />}
      data-testid="button-ghost"
      onClick={() => alert("click")}
    />
  </>
);

export default Example;

IconButton

These are props specific to the IconButton component:

Name	Type	Default
animation	"progress" \| "success" \| "error" \| "pulse"	-
as	"a" \| "button"	button
children	"React.ReactNode"	-
className	string	-
disabled	boolean	-
icon	"JSX.Element"	-
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	md
variant	"fill" \| "outline" \| "ghost"	fill