20 lines
997 B
TypeScript
20 lines
997 B
TypeScript
import { Button as AriaButton, type ButtonProps } from 'react-aria-components';
|
|
|
|
import styles from './Button.module.css';
|
|
|
|
interface Props extends Omit<ButtonProps, 'className' | 'style'> {
|
|
/**
|
|
* A row is a full-width action (the foot of a panel); an icon is a square in a strip or in a
|
|
* row of tabs; an action is a form button, a raised surface instead of colour (prompt §4.2:
|
|
* there are no green "save" and no red "delete" buttons); a primary is that same form button one
|
|
* surface step higher — the main action of a form, still by surface and not by colour.
|
|
*/
|
|
look?: 'row' | 'icon' | 'action' | 'primary';
|
|
}
|
|
|
|
// The look is set by an attribute rather than by a set of classes: that way the class name stays a
|
|
// single one and a typo in it is caught by the structural test instead of slipping away as
|
|
// className="undefined".
|
|
export function Button({ look = 'row', ...props }: Props) {
|
|
return <AriaButton {...props} data-look={look} className={styles.button} />;
|
|
}
|