Button

Client component built with CVA variants and optional permission gating.

Interactive demo

<Button variant="primary" size="default">
  Click me
</Button>

Import

import { Button, buttonVariants } from '@sumx/ui';

Basic usage

<Button variant="primary" size="default" onClick={save}>
  Save
</Button>
 
<Button variant="outline" size="sm">
  Cancel
</Button>

Variants & sizes

Use buttonVariants({ variant, size, className }) when you need styles on a non-<button> element (e.g. asChild).

asChild

Renders Radix Slot so the child receives button styles:

<Button asChild variant="outline">
  <a href="/reports">Reports</a>
</Button>

Permission props

<Button permission={['invoice.create']} permissionMode="hide">
  New invoice
</Button>
 
<Button permission={['invoice.delete']} permissionMode="disable">
  Delete
</Button>

Omit permission or pass ['allow'] to always render (same as other gated components).

Props

Extends React.ButtonHTMLAttributes<HTMLButtonElement> plus CVA variant props:

• variant, size, className, disabled, asChild
• permission, permissionMode

Portal pattern

Use for actions that must respect ERP permissions without duplicating hasPermission checks in every screen.