diff --git a/apps/docs/content/components/buttons/button.md b/apps/docs/content/components/buttons/button.md index fcc0044..6a7d5cf 100644 --- a/apps/docs/content/components/buttons/button.md +++ b/apps/docs/content/components/buttons/button.md @@ -9,14 +9,41 @@ description: Buttons have label text that describes the action that will occur i ## Props -| Props | Type | Description | Default | -| ---------- | ------------------------------------------------- | ------------------------------ | ----------- | -| color | `primary \| secondary \| tertiary \| error` | - | `primary` | -| variant | `elevated \| filled \| tonal \| outlined \| text` | - | `filled` | -| isDisabled | `boolean` | whether the button is disabled | `undefined` | +| Name | Type | Default | Description | +| ------------------- | --------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| form | `string` | — | The
element to associate the button with. The value of this attribute must be the id of a in the same document. | +| formAction | `string` | — | The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner. | +| formEncType | `string` | — | Indicates how to encode the form data that is submitted. | +| formMethod | `string` | — | Indicates the HTTP method used to submit the form. | +| formNoValidate | `boolean` | — | Indicates that the form is not to be validated when it is submitted. | +| formTarget | `string` | — | Overrides the target attribute of the button's form owner. | +| name | `string` | — | Submitted as a pair with the button's value as part of the form data. | +| value | `string` | — | The value associated with the button's name when it's submitted with the form data. | +| isPending | `boolean` | — | Whether the button is in a pending state. This disables press and hover events while retaining focusability, and announces the pending state to screen readers. | +| isDisabled | `boolean` | — | Whether the button is disabled. | +| autoFocus | `boolean` | — | Whether the element should receive focus on render. | +| type | `button` `submit` `reset` | 'button' | The behavior of the button when used in an HTML form. | +| preventFocusOnPress | `boolean` | — | Whether to prevent focus from moving to the button when pressing it. | +| children | `React.ReactNode` | — | The children of the component. A function may be provided to alter the children based on component state. | +| className | `string` | — | The CSS className for the element. A function may be provided to compute the class based on component state. | +| style | `React.CSSProperties` | — | The inline style for the element. A function may be provided to compute the style based on component state. | +| color | `primary` `secondary` `tertiary` `error` | 'primary' | | +| variant | `elevated` `filled` `tonal` `outlined` `text` | 'filled' | | ## Events -| Events | Description | -| --------- | --------------------------------------------------------------------------------------------------------- | -| `onPress` | This is similar to the standard onClick event, but normalized to support all interaction methods equally. | +| Name | Type | Description | +| --------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | +| `onPress` | (e: PressEvent) => void | Handler that is called when the press is released over the target. | +| `onPressStart` | (e: PressEvent) => void | Handler that is called when a press interaction starts. | +| `onPressEnd` | (e: PressEvent) => void | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. | +| `onPressChange` | (e: PressEvent) => void | Handler that is called when the press state changes. | +| `onPressUp` | (e: PressEvent) => void | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. | +| `onFocus` | (e: FocusEvent) => void | Handler that is called when the element receives focus. | +| `onBlur` | (e: FocusEvent) => void | Handler that is called when the element loses focus. | +| `onFocusChange` | (isFocused: boolean) => void | Handler that is called when the element's focus status changes. | +| `onKeyDown` | (e: KeyboardEvent) => void | Handler that is called when a key is pressed. | +| `onKeyUp` | (e: KeyboardEvent) => void | Handler that is called when a key is released. | +| `onHoverStart` | (e: HoverEvent) => void | Handler that is called when a hover interaction starts. | +| `onHoverEnd` | (e: HoverEvent) => void | Handler that is called when a hover interaction ends. | +| `onHoverChange` | (isHovering: boolean) => void | Handler that is called when the hover state changes. |