PaperButton

The core button. No gradients. No rounded-xl. Just ink and intention.

← default variant: calm, sharp, and impossible to ignore.

Preview

'use client'

/**
 * paperButton.tsx
 *
 * Part of Paperflow UI — Paper Design System

Copy this file into your project, export its barrel, and then add it to the master UI index.

Step 1.Create this file:
components/ui/paperButton/paperButton.tsx⎘
Step 2.Create the barrel:
components/ui/paperButton/index.ts⎘
Step 3.Add this export in components/ui/index.ts:
```
export * from './paperButton'
```

Primary

Secondary

Outline

Ghost

Danger

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'danger'`	`primary`	Visual treatment for the action.
`size`	`'sm' \| 'md' \| 'lg'`	`md`	Padding and font size preset.
`isLoading`	`boolean`	`false`	Shows animated loading dots and disables interactions.
`leftIcon`	`ReactNode`	`undefined`	Optional icon before label.
`rightIcon`	`ReactNode`	`undefined`	Optional icon after label.

Use loading state to prevent duplicate submissions.

<PaperButton isLoading>Saving draft</PaperButton>

Reserve red variant for irreversible actions only.

<PaperButton variant="danger">Delete project</PaperButton>