Properties
| Properties | Description |
|---|---|
type | (optional)button, reset or submit for the type HTML attribute. Defaults to button for legacy reasons. |
text or children | (optional) the content of the button can be a string or a React Element. |
aria-label or title | (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 | (optional) defines the kind of button. Possible values are primary, secondary, tertiary and signal. Defaults to primary (or secondary if icon only). |
size | (optional) the size of the button. For now there is small, medium, default and large. |
icon | (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 | (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 | (optional) define icon width and height. Defaults to 16px. |
href | (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 | (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 | (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 | (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 | (optional) if set to true the button text will wrap in to new lines if the overflow point is reached. Defaults to false. |
stretch | (optional) set it to true in order to stretch the button to the available space. Defaults to false. |
bounding | (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 | (optional) only meant to be used for special use cases. Defaults to button or a depending if href is set or not. |
custom_content | (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 | (optional) if set to true, an overlaying skeleton with animation will be shown. |
tooltip | (optional) Provide a string or a React Element to be shown as the tooltip content. |
status | (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 | (optional) defines the state of the status. Currently there are two statuses [error, info]. Defaults to error. |
status_props | (optional) use an object to define additional FormStatus properties. |
globalStatus | (optional) the configuration used for the target GlobalStatus. |
| Space | (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.