Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. Read about intended use and customization.
ToggleButton properties#
| Type | Description | |
|---|---|---|
value | string number object Array | (optional) Defines the value. Use it to get the value during the onChange event listener callback in the ToggleButtonGroup. |
text | string React.ReactNode | (optional) The text shown in the ToggleButton. |
checked | boolean | (optional) Determine whether the ToggleButton is checked or not. The default will be false. |
variant | "default" "checkbox" "radio" | (optional) Use checkbox or radio to show a checkbox or radio button in front of the text. Defaults to default. |
leftComponent | React.ReactNode | (optional) Custom content shown in front of the text, when variant is default. |
title | string | (optional) The title of the input - describing it a bit further for accessibility reasons. |
label | string | (optional) Use either the label property or provide a custom one. |
labelDirection | "vertical" "horizontal" | (optional) To define the label layout direction on how the next element should be placed on. Can be either vertical or horizontal. Defaults to vertical. |
labelSrOnly | boolean | (optional) Use true to make the label only readable by screen readers. |
icon | string React.ReactNode | (optional) Icon to be included in the toggle button. |
iconPosition | "left" "right" | (optional) Position of the icon inside the toggle button. Set to left or right. Defaults to right if not set. |
iconSize | string | (optional) Define icon width and height. Defaults to 16px. |
tooltip | string React.ReactNode | (optional) Provide a string or a React Element to be shown as the tooltip content. |
size | "default" "small" "medium" "large" | (optional) The size of the button. There is default, small, medium and large. |
status | "error" "information" boolean | (optional) Text with a status message. The style defaults to an error message. You can use true to only get the status color, without a message. |
statusState | "error" "warning" "information" "success" "marketing" | (optional) Defines the state of the status. Can be error, warning, information, success or marketing. Defaults to error. |
statusProps | object | (optional) Use an object to define additional FormStatus properties. |
globalStatus | object | (optional) The configuration used for the target GlobalStatus. |
suffix | string React.ReactNode | (optional) Text describing the content of the ToggleButton more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButton component. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
ToggleButton.Group properties#
| Type | Description | |
|---|---|---|
value | string | (optional) Defines the pre-selected ToggleButton button. The value has to match the one provided in the ToggleButton button. Use a string value. |
values | array | (optional) Defines the pre-selected ToggleButton buttons in multiselect mode. The values have to match the one provided in the ToggleButton buttons. Use array, either as JS or JSON string. |
multiselect | boolean | (optional) Defines if the ToggleButtons should act as a multi-selectable list of toggle buttons. Defaults to false. |
layoutDirection | "column" "row" | (optional) Define the layout direction of the ToggleButton buttons. Can be either column or row. Defaults to row. |
title | string | (optional) The title of group, describing it a bit further for accessibility reasons. |
status | "error" "information" boolean | (optional) Uses the form-status component to show failure messages. |
statusState | "error" "warning" "information" "success" "marketing" | (optional) Defines the state of the status. Can be error, warning, information, success or marketing. Defaults to error. |
statusProps | object | (optional) Use an object to define additional FormStatus properties. |
globalStatus | object | (optional) The configuration used for the target GlobalStatus. |
label | string | (optional) Use either the label property or provide a custom one. |
labelDirection | "vertical" "horizontal" | (optional) To define the label layout direction on how the next element should be placed on. Can be either vertical or horizontal. Defaults to vertical. |
labelSrOnly | boolean | (optional) Use true to make the label only readable by screen readers. |
vertical | boolean | (optional) Will force both direction and labelDirection to be vertical if set to true. |
variant | "default" "checkbox" "radio" | (optional) Use checkbox or radio to show a checkbox or radio button in front of the text of every button. With radio, the group gets the radiogroup role. Defaults to default. |
leftComponent | React.ReactNode | (optional) Custom content shown in front of the text of every button, when variant is default. |
size | "default" "small" "medium" "large" | (optional) The size of the buttons. There is default, small, medium and large. |
suffix | string | (optional) Text describing the content of the ToggleButtonGroup more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButtonGroup component. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |