Nexus DSdocs

Button

Installation

npm install @radix-ui/react-slot@^1.2.4 @tabler/icons-react@^3.36.1 class-variance-authority@^0.7.1 clsx@^2.1.1 tailwind-merge@^3.4.0
components/button-group/button-group-context.ts
components/spinner/index.ts
components/spinner/spinner.tsx
lib/icons.ts
lib/utils.ts
components/button/button.tsx
components/button/index.ts

Code

'use client';

import { Button } from '@/components/button/button';

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

Props

Button

Button props
PropTypeDefaultDescription
asChildbooleanfalse

When true, the button renders as its child element (via Radix Slot), applying button styling to e.g. an <a> while leaving the child's own content untouched — compose icons inside the child. loading and the startIcon / endIcon slots apply to the native <button> only.

endIconReactNodeNo default documented

Decorative icon rendered after the button label. Use either endIcon or startIcon, not both. Hidden while loading (the spinner replaces all content).

loadingbooleanfalse

Shows a loading indicator and disables the button. While loading, the spinner replaces all visible content and any icon slots are hidden.

size"default" | "sm" | "lg" | "icon-sm" | "icon" | "icon-lg" | null"default"No description
startIconReactNodeNo default documented

Decorative icon rendered before the button label. Use either startIcon or endIcon, not both. Hidden while loading (the spinner replaces all content).

variant"link" | "default" | "error" | "destructive" | "outline" | "dashed" | "secondary" | "ghost" | null"default"No description

Examples

Variants

'use client';

import { Button } from '@/components/button/button';

export default function ButtonVariants() {
  return (
    <div className="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
      <Button variant="default">Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="error">Error</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="dashed">Dashed</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}

Sizes

'use client';

import { IconStar } from '@tabler/icons-react';

import { Button } from '@/components/button/button';

export default function ButtonSizes() {
  return (
    <div className="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
      <Button size="icon-sm" aria-label="Favorite (small)">
        <IconStar />
      </Button>
      <Button size="icon" aria-label="Favorite">
        <IconStar />
      </Button>
      <Button size="icon-lg" aria-label="Favorite (large)">
        <IconStar />
      </Button>
    </div>
  );
}

With icon

'use client';

import { IconArrowRight, IconRocket } from '@tabler/icons-react';

import { Button } from '@/components/button/button';

export default function ButtonWithIcon() {
  return (
    <div className="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
      <Button startIcon={<IconRocket />}>Launch</Button>
      <Button variant="outline" endIcon={<IconArrowRight />}>
        Continue
      </Button>
    </div>
  );
}

Disabled

'use client';

import { Button } from '@/components/button/button';

export default function ButtonDisabled() {
  return (
    <div className="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
      <Button variant="default" disabled>
        Default
      </Button>
      <Button variant="secondary" disabled>
        Secondary
      </Button>
      <Button variant="error" disabled>
        Error
      </Button>
      <Button variant="destructive" disabled>
        Destructive
      </Button>
      <Button variant="outline" disabled>
        Outline
      </Button>
      <Button variant="dashed" disabled>
        Dashed
      </Button>
      <Button variant="ghost" disabled>
        Ghost
      </Button>
      <Button variant="link" disabled>
        Link
      </Button>
    </div>
  );
}