Button

The Button component renders a customizable clickable element. The component is used to trigger actions or navigate to other pages. It supports multiple style variants, sizes, and link types.

Preview

Fields

  • title (required) - The text label displayed on the button.

  • variant (default: primary) - Style variant of the button. Options:

    • primary

    • secondary

    • ternary

    • outline

    • link

  • size (default: medium) - Size of the button. Options:

    • small

    • medium

    • large

  • backgroundColor (optional) - Hex color code to override the default background color from the selected variant.

  • disabled (optional) - Checkbox to disable the button. When selected, the button becomes non-clickable and uses disabled styling.

  • pageLinkChooser (default: internalPageLink) - Toggle between internal or external link type:

    • If internalPageLink is selected:

      • internalLink (required) - Link to a page within the Magnolia site (page chooser).

    • If externalPageLink is selected:

      • externalLink (required) - URL to an external destination (validated input).

Behavior

  • Renders as a styled button according to the selected variant and size.

  • Button is clickable unless marked as disabled.

  • Navigates to either an internal or external link, depending on the selected option.

  • If backgroundColor is provided, it overrides the default color for the selected variant.

  • All styles are defined in the front-end implementation.

Creating the component

To create this component in your project, run:

npm run mgnl -- create-component Button -p button
This command adds a local copy of the component to your project. You can fully customize it afterward.

Available in

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the Magnolia CLI docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules