Skip to content

Import

import { Button } from '@dnb/eufemia'

Description

The Button component should be used as the primary call-to-action in a form, or as a user interaction mechanism.

Variants and sizes

There should never be more than one primary button in a given context; secondary and tertiary button variants do not have this constraint. Generally speaking, a button should not be used when a link would suffice.

The Button component comes in different sizes.

For variant primary, the recommended sizes are default and large.

For variant secondary, the recommended sizes are default and large.

For variant tertiary, the recommended size is default. A variant with icon_position="top" is also available for use. It is not recommended to use the tertiary button without an icon. Looking for a similar variant without an icon? You might want to check out Anchor instead.

For variant signal, the recommended sizes are default and large.

Icon buttons come in all sizes.