32 lines
1.2 KiB
TypeScript
32 lines
1.2 KiB
TypeScript
// Button: token-styled button atom. Variants map to the --dsw-alias-button-*
|
|
// fill families; no framework imports, all behavior via props.
|
|
|
|
import type { ButtonHTMLAttributes, ReactNode } from 'react'
|
|
import clsx from 'clsx'
|
|
import css from './Button.module.css'
|
|
|
|
/** Visual variant, each backed by its --dsw-alias-button-* token family. */
|
|
export type ButtonVariant = 'primary' | 'ghost' | 'outline' | 'toolbar'
|
|
|
|
/**
|
|
* Render a button.
|
|
* @param props.variant - visual family (default 'ghost').
|
|
* @param props.size - 'md' 36px capsule (figma Button) or 'sm' 28px compact.
|
|
* @param props.icon - optional leading 16px icon node.
|
|
* @returns the button element; native button attributes pass through.
|
|
*/
|
|
export function Button({ variant = 'ghost', size = 'md', icon, className, children, ...rest }: {
|
|
variant?: ButtonVariant
|
|
size?: 'md' | 'sm'
|
|
icon?: ReactNode
|
|
className?: string
|
|
children?: ReactNode
|
|
} & ButtonHTMLAttributes<HTMLButtonElement>) {
|
|
return (
|
|
<button type="button" className={clsx(css.button, css[variant], css[size], className)} {...rest}>
|
|
{icon != null && <span className={css.icon}>{icon}</span>}
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|