children?ReactNodecolor?'primary'|'secondary'|'base''primary'endIcon?ReactNodefullWidth?booleanfalseisActive?booleanfalseonAction?() => void | Promise<void>renderItem?(props: { className: string; children: ReactNode }) => ReactNodesize?'sm'|'md'|'lg''md'startIcon?ReactNodetype?'button'|'submit''button'variant?'solid'|'outline'|'skeleton''solid'| Prop | Type | Default |
|---|---|---|
children? | ReactNode | - |
color? | 'primary'|'secondary'|'base' | 'primary' |
endIcon? | ReactNode | - |
fullWidth? | boolean | false |
isActive? | boolean | false |
onAction? | () => void | Promise<void> | - |
renderItem? | (props: { className: string; children: ReactNode }) => ReactNode |
型ベース（内部で固定する一部attrsは除外）: ComponentPropsWithRef<'button'>
size? | 'sm'|'md'|'lg' | 'md' |
startIcon? | ReactNode | - |
type? | 'button'|'submit' | 'button' |
variant? | 'solid'|'outline'|'skeleton' | 'solid' |
import { Button } from '@k8ordo/ui';<Button variant="solid" color="primary">
Click me
</Button><Button variant="solid">Solid</Button>
<Button variant="outline">Outline</Button>
<Button variant="skeleton">Skeleton</Button><Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="base">Base</Button><Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>import { MailIcon, ChevronIcon } from '@k8ordo/ui';
<Button startIcon={<MailIcon size="sm" />}>
Send Email
</Button>
<Button endIcon={<ChevronIcon direction="right" size="sm" />}>
Next
</Button><Button fullWidth>Full Width Button</Button><Button disabled>Disabled</Button><Button
renderItem={({ className, children }) => (
<a className={className} href="https://example.com">
{children}
</a>
)}
>
Visit
</Button>