Button
BaselineTrigger an action with a clear label and the right emphasis.
Example
Tab to explore focus and keyboard behavior.
example.tsx
'use client'; import 'panel-ui-kit/styles.css';import { PanelUiTheme } from 'panel-ui-kit/theme';import { Button } from 'panel-ui-kit/button'; export function Example() { return ( <PanelUiTheme theme="neutral" motion={{"mode":"full","durationScale":1,"intensity":1}}> <Button>Save changes</Button> </PanelUiTheme> );}When to use
Use a button for an action. Use a composed link when the action takes someone to a different page.
Keyboard
Tab to focus. Press Enter or Space to activate. Disabled buttons are skipped in the tab order.
Properties
| Property | Values | Default |
|---|---|---|
variant | default · outline · link | default |
size | default · lg · link | default |
disabled | boolean | false |
asChild | boolean | false |
motion | full · reduced · off · object | Inherited |