Wovryn UI Kit

Button

Button lets users trigger actions, make choices, or navigate to a destination with a single mouse, touch, or keyboard interaction. It supports multiple visual variants and states and can render as either a button or a link.

Usage

import { Button } from "@wovryn/uikit";

export default function ButtonExample() {
  return <Button>Button</Button>;
}

Examples

Variants

import { Button } from "@wovryn/uikit";

export default function ButtonVariantsExample() {
  return (
    <div className="flex w-fit max-w-full flex-wrap items-center justify-center gap-3">
      <Button variant="default">Default</Button>
      <Button variant="filled">Filled</Button>
      <Button variant="light">Light</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="subtle">Subtle</Button>
      <Button variant="transparent">Transparent</Button>
      <Button variant="white">White</Button>
      <Button variant="destructive">Destructive</Button>
    </div>
  );
}

Sizes

import { Button } from "@wovryn/uikit";

export default function ButtonSizesExample() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button size="xs">Extra small</Button>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
      <Button size="xl">Extra large</Button>
    </div>
  );
}

Disabled state

import { Button } from "@wovryn/uikit";

export default function DisabledButtonStateExample() {
  return (
    <div className="flex w-fit max-w-full flex-wrap items-center justify-center gap-3">
      <Button disabled variant="default">
        Default
      </Button>
      <Button disabled variant="filled">
        Filled
      </Button>
      <Button disabled variant="light">
        Light
      </Button>
      <Button disabled variant="outline">
        Outline
      </Button>
      <Button disabled variant="subtle">
        Subtle
      </Button>
      <Button disabled variant="transparent">
        Transparent
      </Button>
      <Button disabled variant="white">
        White
      </Button>
      <Button disabled variant="destructive">
        Destructive
      </Button>
    </div>
  );
}
Billing unavailable
import { Button } from "@wovryn/uikit";

export default function DisabledButtonLinkExample() {
  return (
    <Button
      component="a"
      data-disabled
      href="/billing"
      onClick={(event) => event.preventDefault()}
      variant="outline"
    >
      Billing unavailable
    </Button>
  );
}

Icons and sections

import { IconArrowRight, IconPlus } from "@tabler/icons-react";
import { Button } from "@wovryn/uikit";

export default function ButtonSectionsExample() {
  return (
    <div className="flex w-fit max-w-full flex-wrap items-center justify-center gap-3">
      <Button leftSection={<IconPlus />}>New project</Button>
      <Button rightSection={<IconArrowRight />} variant="outline">
        Continue
      </Button>
      <Button leftSection={<IconPlus />} rightSection={<IconArrowRight />} variant="light">
        Browse projects
      </Button>
    </div>
  );
}

Loading

import { Button } from "@wovryn/uikit";

export default function LoadingButtonsExample() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex w-fit max-w-full flex-wrap items-center justify-center gap-3">
        <Button loading variant="default">
          Default
        </Button>
        <Button loading variant="filled">
          Filled
        </Button>
        <Button loading variant="light">
          Light
        </Button>
        <Button loading variant="outline">
          Outline
        </Button>
        <Button loading variant="subtle">
          Subtle
        </Button>
        <Button loading variant="transparent">
          Transparent
        </Button>
        <Button loading variant="white">
          White
        </Button>
        <Button loading variant="destructive">
          Destructive
        </Button>
      </div>
      <div className="flex w-fit max-w-full flex-wrap items-center justify-center gap-3">
        <Button loading variant="default" loaderProps={{ type: "dots" }}>
          Default
        </Button>
        <Button loading variant="filled" loaderProps={{ type: "dots" }}>
          Filled
        </Button>
        <Button loading variant="light" loaderProps={{ type: "dots" }}>
          Light
        </Button>
        <Button loading variant="outline" loaderProps={{ type: "dots" }}>
          Outline
        </Button>
        <Button loading variant="subtle" loaderProps={{ type: "dots" }}>
          Subtle
        </Button>
        <Button loading variant="transparent" loaderProps={{ type: "dots" }}>
          Transparent
        </Button>
        <Button loading variant="white" loaderProps={{ type: "dots" }}>
          White
        </Button>
        <Button loading variant="destructive" loaderProps={{ type: "dots" }}>
          Destructive
        </Button>
      </div>
    </div>
  );
}

Full width and alignment

import { IconArrowRight } from "@tabler/icons-react";
import { Button } from "@wovryn/uikit";

export default function FullWidthButtonExample() {
  return (
    <div className="w-full max-w-sm">
      <Button fullWidth justify="space-between" rightSection={<IconArrowRight />}>
        Continue
      </Button>
    </div>
  );
}

Accessibility

  • Use Button for actions and an anchor-styled Button for navigation.
  • Keep labels short and stable. Do not rely on an icon or color alone.
  • Use disabled when an action is unavailable and explain why in nearby text.
  • Keep destructive actions visually distinct and consider confirmation for difficult-to-reverse operations.

API reference

Wovryn preserves Mantine's Button API and adds the destructive variant.

PropValuesDefaultPurpose
variantdefault, filled, light, outline, subtle, transparent, white, destructivefilledSets the visual hierarchy.
sizexs, sm, md, lg, xlmdSets height, spacing, text, and icon size.
disabledbooleanfalseDisables a native Button.
loadingbooleanfalseDisables activation and displays a loader.
fullWidthbooleanfalseExpands to the parent width.
leftSection, rightSectionReactNode—Adds supporting content around the label.
componentElementTypebuttonChanges the rendered element, including links.

See the Mantine Button API for inherited polymorphic, loader, Styles API, and native element props.