Button
A button communicates an action to a user and indicates what will happen next.
import { ... } from '@ag.ds-next/react/button';Usage
Button components can be imported via the button entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/button';Props
| Prop | Type | Description |
|---|---|---|
| alignSelf? | ResponsiveProp<"center" | "flex-start" | "flex-end" | "stretch" | "start" | "end" | "baseline"> | Sets the CSS align-self property.https://developer.mozilla.org/en-US/docs/Web/CSS/align-self |
| aria-controls? | string | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
| aria-describedby? | string | Identifies the element (or elements) that describes the object. |
| aria-expanded? | Booleanish | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
| aria-label? | string | Describes the button element to assistive technologies. |
| block? | booleanDefault: false | If true, the button will stretch to the fill the width of its container. |
| children? | ReactNode | |
| disabled? | boolean | When true, prevents onClick from firing. |
| focusRingFor? | "all" | "keyboard"Default: "keyboard" | Display a focus indicator when the button receives focus. By default, this is set to 'keyboard'. 'all' shows for all users, includes programmatic focus, and 'keyboard' is for keyboard-only focus. |
| form? | string | The id of the form to attach the button to. Use in conjunction with type="submit". |
| iconAfter? | ComponentType<IconProps> | The icon to display after the buttons children. |
| iconBefore? | ComponentType<IconProps> | The icon to display before the buttons children. |
| id? | string | Defines an identifier (ID) which must be unique. |
| loading? | booleanDefault: false | When true, the button will display a loading indicator. |
| loadingLabel? | stringDefault: "Busy" | Text to read out to assistive technologies when button is loading. |
| onBlur? | FocusEventHandler<HTMLButtonElement> | Function to be fired following a blur event of the button. |
| onClick? | MouseEventHandler<HTMLButtonElement> | Function to be fired following a click event of the button. |
| onFocus? | FocusEventHandler<HTMLButtonElement> | Function to be fired following a focus event of the button. |
| onKeyDown? | KeyboardEventHandler<HTMLButtonElement> | Function to be fired following a keydown event of the button. |
| ref? | Ref<HTMLButtonElement> | |
| role? | AriaRole | WAI-ARIA role. |
| size? | "md" | "sm"Default: "md" | The size of the button. |
| tabIndex? | number | The `tabIndex` attribute of the button. |
| type? | "button" | "reset" | "submit"Default: "button" | The `type` attribute of the button. |
| variant? | "text" | "primary" | "secondary" | "tertiary"Default: "primary" | The variant of the button. |
| Prop | Type | Description |
|---|---|---|
| alignSelf? | ResponsiveProp<"center" | "flex-start" | "flex-end" | "stretch" | "start" | "end" | "baseline"> | Sets the CSS align-self property.https://developer.mozilla.org/en-US/docs/Web/CSS/align-self |
| aria-label? | string | Describes the anchor element to assistive technologies. |
| block? | booleanDefault: false | If true, the button will stretch to the fill the width of its container. |
| children? | ReactNode | |
| download? | any | Causes the browser to treat the linked URL as a download. |
| focusRingFor? | "all" | "keyboard"Default: "keyboard" | Display a focus indicator when the button receives focus. By default, this is set to 'keyboard'. 'all' shows for all users, includes programmatic focus, and 'keyboard' is for keyboard-only focus. |
| href? | string | The URL that the hyperlink points to. |
| iconAfter? | ComponentType<IconProps> | The icon to display after the buttons children. |
| iconBefore? | ComponentType<IconProps> | The icon to display before the buttons children. |
| id? | string | The ID of the hyperlink. |
| ref? | Ref<HTMLAnchorElement> | |
| referrerPolicy? | HTMLAttributeReferrerPolicy | How much of the referrer to send when following the link. |
| rel? | string | The relationship of the linked URL as space-separated link types. |
| role? | AriaRole | WAI-ARIA role. |
| size? | "md" | "sm"Default: "md" | The size of the button. |
| target? | HTMLAttributeAnchorTarget | Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>). |
| variant? | "text" | "primary" | "secondary" | "tertiary"Default: "primary" | The variant of the button. |
Source
You can view the full source code for this package on Github.