Wensity

Button

A dependable action primitive for every app flow.

buttonformactionprimitiveloadingdashboard
Loading preview...

Examples

Practical examples and common states for the same installable component.

Secondary

Quiet supporting action that still reads as clickable.

examples/button-secondary.tsx
import { Button } from "@/components/wensity/button";


export function ButtonSecondary() {
  return <Button variant="secondary">Save draft</Button>;
}

White

Bright CTA reserved for dark heroes or one-action moments.

examples/button-white.tsx
import { IconArrowRight } from "@tabler/icons-react";
import { Button } from "@/components/wensity/button";


export function ButtonWhite() {
  return (
    <Button variant="white" rightIcon={<IconArrowRight />} rightIconMotion="arrow">
      Launch demo
    </Button>
  );
}

Destructive

Danger action for deletion or irreversible changes.

examples/button-destructive.tsx
import { IconTrash } from "@tabler/icons-react";
import { Button } from "@/components/wensity/button";


export function ButtonDestructive() {
  return (
    <Button variant="destructive" leftIcon={<IconTrash />} leftIconMotion="trash">
      Delete project
    </Button>
  );
}

Icons

Optional left and right icon slots without extra wrappers.

examples/button-icons.tsx
import { IconDownload, IconMail } from "@tabler/icons-react";
import { Button } from "@/components/wensity/button";


export function ButtonIcons() {
  return (
    <div className="flex items-center gap-3">
      <Button leftIcon={<IconMail />} leftIconMotion="mail">
        Email team
      </Button>
      <Button variant="outline" rightIcon={<IconDownload />} rightIconMotion="download">
        Download
      </Button>
    </div>
  );
}

Button Group

Fuse related actions into one segmented control with a primary action, dividers, and an overflow menu.

examples/button-button-group.tsx
"use client";


import {
  IconChevronLeft,
  IconCopy,
  IconDots,
  IconFileExport,
  IconHistory,
  IconShare3,
  IconTrash,
} from "@tabler/icons-react";
import {
  ButtonGroup,
  ButtonGroupItem,
  ButtonGroupMenu,
  ButtonGroupMenuContent,
  ButtonGroupMenuItem,
  ButtonGroupMenuLabel,
  ButtonGroupMenuSeparator,
  ButtonGroupMenuTrigger,
  ButtonGroupSeparator,
} from "@/components/wensity/button";


export function DraftActions() {
  return (
    <ButtonGroup aria-label="Draft actions">
      <ButtonGroupItem size="icon" aria-label="Previous draft">
        <IconChevronLeft />
      </ButtonGroupItem>
      <ButtonGroupSeparator />
      <ButtonGroupItem>Save draft</ButtonGroupItem>
      <ButtonGroupSeparator />
      <ButtonGroupItem>Publish</ButtonGroupItem>
      <ButtonGroupSeparator />
      <ButtonGroupItem>Share</ButtonGroupItem>
      <ButtonGroupSeparator />
      <ButtonGroupMenu>
        <ButtonGroupMenuTrigger size="icon" aria-label="More draft actions">
          <IconDots />
        </ButtonGroupMenuTrigger>
        <ButtonGroupMenuContent align="end">
          <ButtonGroupMenuLabel>Draft</ButtonGroupMenuLabel>
          <ButtonGroupMenuItem icon={<IconCopy />} shortcut="Cmd+D">
            Duplicate
          </ButtonGroupMenuItem>
          <ButtonGroupMenuItem icon={<IconHistory />}>
            Version history
          </ButtonGroupMenuItem>
          <ButtonGroupMenuItem icon={<IconFileExport />}>
            Export as PDF
          </ButtonGroupMenuItem>
          <ButtonGroupMenuSeparator />
          <ButtonGroupMenuItem icon={<IconShare3 />}>
            Copy invite link
          </ButtonGroupMenuItem>
          <ButtonGroupMenuSeparator />
          <ButtonGroupMenuItem destructive icon={<IconTrash />}>
            Delete draft
          </ButtonGroupMenuItem>
        </ButtonGroupMenuContent>
      </ButtonGroupMenu>
    </ButtonGroup>
  );
}

Loading

Built-in loading state disables the action and keeps width stable.

examples/button-loading.tsx
import { Button } from "@/components/wensity/button";


export function ButtonLoading() {
  return <Button loading>Saving changes</Button>;
}

Ghost

Toolbar and dense UI action with minimal chrome.

examples/button-ghost.tsx
import { Button } from "@/components/wensity/button";


export function ButtonGhost() {
  return <Button variant="ghost">Cancel</Button>;
}

Disabled

Disabled buttons keep layout stable while clearly dropping emphasis.

examples/button-disabled.tsx
import { Button } from "@/components/wensity/button";


export function ButtonDisabled() {
  return (
    <div className="flex items-center gap-3">
      <Button disabled>Disabled</Button>
      <Button disabled variant="outline">
        Disabled
      </Button>
    </div>
  );
}