{
  "id": "uilib/components/button",
  "name": "Button",
  "description": "The Button component should be used as the primary call-to-action in a form, or as a user interaction mechanism.",
  "group": "components",
  "slug": "/uilib/components/button/",
  "props": [
    {
      "name": "type",
      "doc": "The type HTML attribute. Defaults to `button` for legacy reasons.",
      "type": [
        "button",
        "reset",
        "submit"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "text",
      "doc": "The content of the button can be a string or a React Element.",
      "type": [
        "string",
        "React.ReactNode"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "aria-label",
      "doc": "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.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "title",
      "doc": "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.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "variant",
      "doc": "Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary` (or `secondary` if icon only).",
      "type": [
        "primary",
        "secondary",
        "tertiary",
        "signal"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "size",
      "doc": "The size of the button. For now there is `small`, `medium`, `default` and `large`.",
      "type": [
        "small",
        "medium",
        "default",
        "large"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "icon",
      "doc": "To be included in the button. [Primary Icons](/icons/primary) can be set as a string (e.g. `icon=\"chevron_right\"`), other icons should be set as React elements.",
      "type": [
        "string",
        "React.ReactNode"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "icon_position",
      "doc": "Position of icon inside the button. Set to `left` or `right`. Tertiary button variant also supports `top`. Defaults to `right` if not set.",
      "type": [
        "left",
        "right",
        "top"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "icon_size",
      "doc": "Define icon width and height. Defaults to 16px.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "href",
      "doc": "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.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "target",
      "doc": "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`.",
      "type": [
        "_self",
        "_blank",
        "_parent",
        "_top"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "rel",
      "doc": "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`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "to",
      "doc": "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.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "wrap",
      "doc": "If set to `true` the button text will wrap in to new lines if the overflow point is reached. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "stretch",
      "doc": "Set it to `true` in order to stretch the button to the available space. Defaults to false.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "bounding",
      "doc": "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.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "element",
      "doc": "Only meant to be used for special use cases. Defaults to `button` or `a` depending if href is set or not.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "custom_content",
      "doc": "If you need to inject completely custom markup (React Element) into the button component. You have then to handle alignment and styling by yourself.",
      "type": "React.ReactNode",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "skeleton",
      "doc": "If set to `true`, an overlaying skeleton with animation will be shown.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "tooltip",
      "doc": "Provide a string or a React Element to be shown as the tooltip content.",
      "type": [
        "string",
        "React.ReactNode"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "status",
      "doc": "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.",
      "type": [
        "error",
        "info",
        "boolean"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "status_state",
      "doc": "Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.",
      "type": [
        "error",
        "info"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "status_props",
      "doc": "Use an object to define additional FormStatus properties.",
      "type": "object",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "globalStatus",
      "doc": "The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).",
      "type": "object",
      "status": "optional",
      "defaultValue": null
    }
  ],
  "events": [
    {
      "name": "on_click",
      "doc": "will be called on a click event. Returns an object with the native event: `{ event }`.",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    }
  ],
  "related": [
    "Space"
  ],
  "checksum": "0ea24b982d6a1f77f5d1b82a5f1109ed813c7a275898dd90b0fe127692587bba",
  "source": {
    "repo": "https://github.com/dnbexperience/eufemia",
    "file": "packages/dnb-eufemia/src/components/button/Button.js",
    "permalink": "https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/src/components/button/Button.js"
  },
  "sources": {
    "entry": {
      "local": "src/docs/uilib/components/button.mdx",
      "public": "https://7054fffd.eufemia-e25.pages.dev/uilib/components/button/"
    },
    "props": {
      "local": "src/docs/uilib/components/button/properties.mdx",
      "public": "https://7054fffd.eufemia-e25.pages.dev/uilib/components/button/properties/"
    },
    "events": {
      "local": "src/docs/uilib/components/button/events.mdx",
      "public": "https://7054fffd.eufemia-e25.pages.dev/uilib/components/button/events/"
    },
    "demos": {
      "local": "src/docs/uilib/components/button/demos.mdx",
      "public": "https://7054fffd.eufemia-e25.pages.dev/uilib/components/button/demos/"
    }
  },
  "version": "0.0.0-development",
  "generatedAt": "2025-12-18T10:03:59.746Z",
  "schemaVersion": 1
}