Button 10.17.4

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 { Button } from "@heathmont/moon-core-tw";

const Default = () => <Button>Default</Button>;

export default Default;

Sizes

The component <Button /> supports various sizes using the size prop, allowing integration with your custom layout. By default Medium md size if not specified.

"use client";

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

const Sizes = () => (
  <>
    <Button size="xs" iconLeft={<OtherFrame />}>
      XS Button
    </Button>
    <Button size="sm" iconLeft={<OtherFrame />}>
      SM Button
    </Button>
    <Button iconLeft={<OtherFrame />}>MD Button is default</Button>
    <Button size="lg" iconLeft={<OtherFrame />}>
      LG Button
    </Button>
    <Button size="xl" iconLeft={<OtherFrame />}>
      XL Button
    </Button>
  </>
);

export default Sizes;

Disabled

"use client";

import { Button } from "@heathmont/moon-core-tw";

const Disabled = () => <Button disabled>Disabled</Button>;

export default Disabled;

Animations

"use client";

import { Button } from "@heathmont/moon-core-tw";

const Animations = () => (
  <>
    <Button animation="progress" data-testid="progress">
      Progress
    </Button>
    <Button animation="success" data-testid="success">
      Success
    </Button>
    <Button animation="error" data-testid="error">
      Error
    </Button>
    <Button animation="pulse" data-testid="pulse">
      Pulse
    </Button>
  </>
);

export default Animations;

Button as a link HTML element

You can use the <Button /> component as an <a> tag in HTML to preserve the simplicity of a single-tap action and leverage the inherent hyperlink functionality.

Link HTML element

"use client";

import { Button } from "@heathmont/moon-core-tw";

const ButtonAsLink = () => (
  <Button as="a" href="#ButtonAsLinkHTML">
    Link HTML element
  </Button>
);

export default ButtonAsLink;

Default with click

"use client";

import Button from "@heathmont/moon-core-tw/lib/es/button/Button";

export const DefaultWithClick = () => (
  <Button onClick={() => alert("Click")}>Default</Button>
);

export default DefaultWithClick;

Full Width

"use client";

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

const FullWidth = () => (
  <Button iconRight={<OtherFrame />} fullWidth>
    Full width
  </Button>
);

export default FullWidth;

Icons

"use client";

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

const Icons = () => (
  <>
    <Button iconLeft={<OtherFrame />}>IconLeft</Button>
    <Button iconRight={<OtherFrame />}>IconRight</Button>
  </>
);

export default Icons;

Multi line

"use client";

import { Button } from "@heathmont/moon-core-tw";

const MultiLine = () => (
  <Button size="xl" className="py-3">
    <span className="flex flex-col gap-1">
      <span className="leading-none">Button text</span>
      <span className="text-moon-9 font-normal leading-[12px]">
        Placeholder text
      </span>
    </span>
  </Button>
);

export default MultiLine;

Variants

"use client";

import { Button } from "@heathmont/moon-core-tw";

const Variants = () => (
  <>
    <Button>Fill is default</Button>
    <Button variant="outline">Outline</Button>
    <Button variant="ghost">Ghost</Button>
  </>
);

export default Variants;

Button

These are props specific to the Button component:

Name	Type	Default
animation	enum	-
as	"a" \| "button"	button
children	"React.ReactNode"	-
className	string	-
disabled	boolean	false
fullWidth	boolean	false
iconLeft	"JSX.Element"	-
iconRight	"JSX.Element"	-
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	md
variant	"fill" \| "outline" \| "ghost"	fill