Skip to content

Properties

PropertiesDescription
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.
title(optional) title of the button. Optional, but should always be included because of accessibility.
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 prop 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.