Toggle button
Toggle button is a two-state button that represents and performs an on/off state.
import { ... } from '@ag.ds-next/react/toggle-button';Usage
Toggle button components can be imported via the toggle-button entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/toggle-button';Props
| Prop | Type | Description |
|---|---|---|
| label | string | The label of the button when in its default state. |
| onClick | (pressedState: boolean) => void | Function to be called when the button is clicked. |
| pressedLabel | string | The label of the button when its pressed state. |
| aria-describedby? | string | Identifies the element (or elements) that describes the object. |
| children? | ReactNode | |
| disabled? | boolean | When true, prevents onClick from firing. |
| form? | string | The id of the form to attach the button to. Use in conjunction with type="submit". |
| hiddenLabel? | booleanDefault: false | When true, visually hides the label. |
| iconType? | "flag" | "star"Default: "flag" | Determines the pair of icons to display in the default and pressed state. |
| id? | string | Defines an identifier (ID) which must be unique. |
| onBlur? | FocusEventHandler<HTMLButtonElement> | Function to be fired following a blur 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. |
| onMouseEnter? | MouseEventHandler<HTMLButtonElement> | Function to be fired following a mouseenter event of the button. |
| onMouseLeave? | MouseEventHandler<HTMLButtonElement> | Function to be fired following a mouseleave event of the button. |
| onMouseOut? | MouseEventHandler<HTMLButtonElement> | Function to be fired following a mouseout event of the button. |
| onMouseOver? | MouseEventHandler<HTMLButtonElement> | Function to be fired following a mouseover event of the button. |
| pressed? | booleanDefault: false | The current pressed state of the ToggleButton. |
| ref? | Ref<HTMLButtonElement> | |
| size? | "sm" | "md"Default: "md" | |
| tabIndex? | number | The `tabIndex` attribute of the button. |
| variant? | "primary" | "secondary" | "tertiary" | "text"Default: "text" |
Source
You can view the full source code for this package on Github.