Canvas Docs

Header Button

A call-to-action button/link for a built header, styled with the theme's button classes. It is shown in the block inserter as Canvas Header Button and registered as canvas-core/header-button.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Header Button settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

  • Button TextDefaultGet Started

    Words on the button. The Rich Label below replaces this when it is filled in.

  • Rich Label (Inline HTML)DefaultEmpty

    Optional label markup rendered inside the link instead of the plain Button Text, for labels carrying inline leaves (trailing icon element, ligature icon-font glyphs, a wrapped label element). Overrides Button Text and the icon fields when set.

  • Icon (Optional)DefaultEmpty

    Optional leading icon. When set, the button text is hidden below the "md" breakpoint and only the icon shows (semi-transparent floating header CTA pattern). Ignored when "Icon + Text Inline" is enabled below.

  • Second Icon (Optional)DefaultEmpty

    Optional second leading icon rendered immediately after the first (icon-swap trigger pattern, e.g. bi-list / bi-x-lg). Only used when "Icon + Text Inline" is enabled.

  • Icon + Text InlineDefaultOff

    Renders the icon(s) and text together, always visible at every breakpoint (no responsive hide): the off-canvas menu trigger pattern ( Menu), instead of the icon-only-on-mobile/text-only-on-desktop behavior above.

  • Icon PositionDefaultBefore the text

    Which side of the wording the icon sits on. Only applies when "Icon + Text Inline" is on: the responsive mode shows one or the other at a time, so a side is not observable there.

    ChoicesBefore the textAfter the textShown when Icon + Text Inline is on

  • URLDefaultEmpty

    Address the button opens. Enter a "#section-id" fragment to point it at a panel elsewhere on the page.

Settings

  • Open in New TabDefaultOff

    Open the link in a new browser tab.

  • Link RelationshipDefaultEmpty

    The rel value on the link. Automatic adds noopener whenever the link opens a new tab.

    ChoicesAutomatic (noopener on a new tab) (empty)Nonenofollowsponsoredugc

  • Extra ClassesDefaultEmpty

    Additional utility classes appended after the style classes (e.g. CTA buttons with gradient/rounded utilities).

  • Line Break AfterDefaultOff

    Emit a after the button so the next inline element (a note or small print) starts on its own line.

  • Bootstrap Data Toggle (Optional)DefaultEmpty

    Turns the button into the opener for a panel elsewhere on the page. Enter what it opens, such as "offcanvas", "modal" or "collapse", and point the URL above at that panel with a "#id" fragment; screen readers are then told what the button controls.

  • Button StyleDefaultButton (Default)

    Base look of the button. Choose No Base Style when your own classes supply the whole appearance.

    ChoicesButton (Default)RoundedBorderedNo Base Style (Extra Classes only)

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Header: App Menu, Header Cart, Header Container, Header Icon Link, Header Info, Header Logo.

Was this page helpful?