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). |
size | small medium default large | (optional) The size of the button. For now there is small, medium, default and large. |
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. |
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.