Components

Button

Trigger actions and navigate between pages with accessible, customizable buttons.

Interactive Demo

Variant

Size

import { Button } from 'framejs-ui';

function Example() {
  return (
    <Button variant="primary" size="md">
      Click me
    </Button>
  );
}

Prop	Type	Default	Description
variant	'primary' \| 'secondary' \| 'ghost' \| 'danger'	'primary'	Visual style variant
size	'sm' \| 'md' \| 'lg'	'md'	Button size
disabled	boolean	false	Disable button
loading	boolean	false	Show loading state
fullWidth	boolean	false	Make button full width
leftIcon	ReactNode	-	Icon before text
rightIcon	ReactNode	-	Icon after text

<Button leftIcon={<PlusIcon />}>Add Item</Button>
<Button rightIcon={<DownloadIcon />} variant="ghost">Download</Button>

<Button loading>Loading...</Button>

Components

Trigger actions and navigate between pages with accessible, customizable buttons.

Variant

Size

import { Button } from 'framejs-ui';

function Example() {
  return (
    <Button variant="primary" size="md">
      Click me
    </Button>
  );
}

Prop	Type	Default	Description
variant	'primary' \| 'secondary' \| 'ghost' \| 'danger'	'primary'	Visual style variant
size	'sm' \| 'md' \| 'lg'	'md'	Button size
disabled	boolean	false	Disable button
loading	boolean	false	Show loading state
fullWidth	boolean	false	Make button full width
leftIcon	ReactNode	-	Icon before text
rightIcon	ReactNode	-	Icon after text

<Button leftIcon={<PlusIcon />}>Add Item</Button>
<Button rightIcon={<DownloadIcon />} variant="ghost">Download</Button>

<Button loading>Loading...</Button>