Properties
| Property | Type | Description |
|---|---|---|
type | button reset submit | (optional) The type HTML attribute. Defaults to button for legacy reasons. |
text | string React.ReactNode | (optional) The content of the button can be a string or a React Element. |
aria-label | string | (optional) Required if there is no text in the button. If text and children are undefined, setting the title property will automatically set aria-label with the same value. |
title | string | (optional) Required if there is no text in the button. If text and children are undefined, setting the title property will automatically set aria-label with the same value. |
variant | primary secondary tertiary signal | (optional) Defines the kind of button. Possible values are primary, secondary, tertiary and signal. Defaults to primary (or secondary if icon only). The tertiary button is normally used together with an icon and officially supports only the default and large sizes. |
size | small medium default large | (optional) The size of the button. There is small, medium, default and large. The tertiary button officially supports only default and large. Changing the size mainly affects spacing, but the large tertiary button also has a larger font size. |
icon | string React.ReactNode | (optional) To be included in the button. Primary Icons can be set as a string (e.g. icon="chevron_right"), other icons should be set as React elements. For the tertiary button an icon is basically required for accessibility reasons (unless you explicitly turn it off with icon={false}). |
icon_position | left right top | (optional) Position of icon inside the button. Set to left or right. Tertiary button variant also supports top. Defaults to right if not set. |
icon_size | string | (optional) Define icon width and height. Defaults to 16px. |
href | string | (optional) If you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button. |
target | _self _blank _parent _top | (optional) When button behaves as a link. Used to specify where to open the linked document, specified by href. Possible values are _self, _blank, _parent and _top. |
rel | string | (optional) When button behaves as a link. Used to specify the relationship between a linked resource and the current document. Examples(non-exhaustive list) of values are nofollow, search, and tag. |
to | string | (optional) Use this property only if you are using a router Link component as the element that uses the to property to declare the navigation url. |
wrap | boolean | (optional) If set to true the button text will wrap in to new lines if the overflow point is reached. Defaults to false. |
stretch | boolean | (optional) Set it to true in order to stretch the button to the available space. Defaults to false. |
bounding | boolean | (optional) Set it to true in order to extend the bounding box (above the visual button background). You may also look into the HTML class dnb-button__bounding if it needs some CSS customization in order to get the particular button right for your use-case. |
element | string | (optional) Only meant to be used for special use cases. Defaults to button or a depending if href is set or not. |
custom_content | React.ReactNode | (optional) If you need to inject completely custom markup (React Element) into the button component. You have then to handle alignment and styling by yourself. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
tooltip | string React.ReactNode | (optional) Provide a string or a React Element to be shown as the tooltip content. |
status | error info boolean | (optional) Set it to either status="error" or a 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. |
status_state | error info | (optional) Defines the state of the status. Currently there are two statuses [error, info]. Defaults to error. |
status_props | object | (optional) Use an object to define additional FormStatus properties. |
globalStatus | object | (optional) The configuration used for the target GlobalStatus. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Unstyled variant
In cases where it makes sense to use the button component, but with very different styles, you can use unstyled as a variant. For now, it is only meant to be used internally.