Buttons

Fully featured button with style variants, sizes, shapes, colors, icons, hover effects, and shadow options. It is shown in the block inserter as Canvas Button and registered as canvas-core/button.

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

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 TextDefaultClick Here

  Inline formatting (e.g. ) is allowed, used by the Full-Width Banner style.

• LinkDefaulta preset list of 3 rows

  Where the button takes the visitor, and whether it opens in a new tab. Leave it empty for a control that does its work on the page it is already on, such as a form submit button.

• Open Inline Modal (#id)DefaultEmpty

  Open an inline modal/popup on click (Magnific Popup). Enter the target element ID including the # (e.g. #modal-login). Overrides the Link above.

• Open Link in LightboxDefaultEmpty

  What the Link opens in the lightbox instead of navigating to. Ignored when Open Inline Modal is set.

  ChoicesNo - follow the link (empty)ImageVideo / iframeAjax (load the URL into the lightbox)Inline (#element on this page)GalleryGallery itemShown when Open Inline Modal (#id) is empty

• Sub-TextDefaultEmpty

  Small description line displayed below the button label.

• Hover LabelDefaultEmpty

  A second label that slides in over the first on hover. Setting it wraps both labels in their own inline elements.

• IconDefaultEmpty

  An icon shown beside the wording. Leave it unset for a button with words only.

• Responsive Icon ClassesDefaultEmpty

  Show a different icon at different screen widths, written as one screen size and icon pair per space, as in "up-xl:bi-display lg:bi-laptop xs:bi-phone". The icon slot is drawn even when no Icon is chosen above.

• Icon Inline StyleDefaultEmpty

  Styling written straight onto the icon. Icon fonts rarely sit exactly on the text baseline, so an arrow or chevron beside a label often needs a nudge of a pixel or two, and no class on the button can reach the icon inside it.

• Title AttributeDefaultEmpty

  Value for the HTML title attribute: this is where a Bootstrap tooltip trigger reads its copy from.

• Icon PositionDefaultBefore

  Whether the icon sits before the wording or after it. An arrow reads better after, a symbol that names the action before.

  ChoicesBeforeAfter

• Push Icon to the EndDefaultOn

  Sends an icon that follows the wording to the far edge of the button, so the label and the glyph sit at opposite ends. Switch it off to keep the glyph right beside the words.

  Shown when Icon Position is "After"

• HTML TagDefaultLink (a)

  Use button or input for form controls; an input takes its label from the Button Text. Choose a static chip when the button sits inside a card that is already a link: HTML forbids a link inside a link.

  ChoicesLink (a)Button (button)Input (input)Static chip (div)Static chip (span)

• Type AttributeDefaultEmpty

  What pressing this control does inside a form: submit sends the form, reset empties it, and button leaves the behaviour to a script. None sets nothing, which most browsers treat as submit.

  ChoicesNone (empty)buttonsubmitresetShown when HTML Tag is "Button (button)"

• Type AttributeDefaultbutton

  What pressing this control does inside a form: submit sends the form, reset empties it, and button leaves the behaviour to a script.

  ChoicesbuttonsubmitresetShown when HTML Tag is "Input (input)"

• Name AttributeDefaultEmpty

  The key this control posts under. A form with more than one submit button needs it to tell which was pressed.

  Shown when HTML Tag is "Button (button)" or "Input (input)"

• Announce as a ButtonDefaultOff

  Adds role="button": recommended when a link acts as a control.

  Shown when HTML Tag is "Link (a)"

• DisabledDefaultOff

  Applies the disabled attribute (button and input tags only).

Style

• Wrap Label in a SpanDefaultOff

  Puts the label in its own inline element, which underline, strike-through and scale effects animate independently of the button box.

• Bootstrap VariantDefaultSecondary

  Which framework colour the button takes. The Outline choices draw that colour as a border around a clear middle, which fills in on hover.

  ChoicesNone (no colour) (empty)SecondaryPrimarySuccessInfoWarningDangerLightDarkLinkOutline SecondaryOutline Primaryand 6 moreShown when Style is "Bootstrap (.btn)"

• Bootstrap SizeDefaultEmpty

  How large the framework button is drawn.

  ChoicesDefault (empty)LargeSmallShown when Style is "Bootstrap (.btn)"

• SizeDefaultDefault

  How large the button is drawn, from a small inline chip up to an oversized call to action.

  ChoicesMiniSmallDefaultLargeExtra Large

• ShapeDefaultDefault

  The corners of the button: a slight curve, a full pill, or a circle, which suits a button holding nothing but an icon.

  ChoicesDefaultRoundedCircle

• Color PresetDefaultEmpty

  Which of the ready made colours the button takes. Default follows the theme colour set in Theme Options, so every button moves together when you change it.

  ChoicesDefault (Theme Color) (empty)RedTealYellowGreenBrownAquaPurpleLeafPinkBlueDirty Greenand 6 more

• Uppercase TextDefaultOff

  Sets the wording in capitals, without changing what you typed.

• Light VariantDefaultOff

  Applies button-light class for applicable colors.

• Full-Width BannerDefaultOff

  Applies button-full for a block-level banner CTA. Wrap part of the label in for the emphasised segment.

• Block AlignmentDefaultEmpty

  Where the button sits across the width available to it. None leaves it where it falls, which is what you want when it sits in a line of text or beside another button.

  ChoicesNone (empty)LeftCenterRight

• Thin BorderDefaultOff

  Use a thinner border line (button-border-thin).

  Shown when Style is "Border (Outline)"

• Fill EffectDefaultEmpty

  Which edge the colour floods in from when a visitor hovers an outlined button.

  ChoicesNone (empty)Fill from LeftFill from RightFill from TopFill from BottomShown when Style is "Border (Outline)"

• GradientDefaultEmpty

  Fills the button with a blend of two colours instead of one flat colour. It works with the 3D style as well as the Gradient one.

  ChoicesNone (empty)Blue - PurpleHorizonLightBlue - GreenMultiplesOceanEarthSkyPurple - BlueGreen - BlueGrey - Orangeand 2 moreShown when Style is "Gradient" or "3D"

• Icon Hover EffectDefaultEmpty

  A turn the icon makes when a visitor hovers the button: Flip X spins it sideways, Flip Y end over end.

  ChoicesNone (empty)Flip XFlip Y

• Text Hover EffectDefaultEmpty

  The same turn applied to the wording rather than the icon.

  ChoicesNone (empty)Flip XFlip Y

• Icon Reveal on HoverDefaultOff

  Shows the icon only on hover with a sliding reveal animation.

• Reveal DirectionDefaultLeft

  Which side the hidden icon slides in from as the wording moves aside.

  ChoicesLeftRightShown when Icon Reveal on Hover is on

• Shadow StyleDefaultEmpty

  Lifts the button off the page with a shadow. Pick the one that suits what sits behind it: Light for a pale background, Dark for a deep one.

  ChoicesNone (empty)DarkLightContrast

• Shadow Press AnimationDefaultOff

  Adds a pressed-shadow animation on hover.

• StyleDefaultDefault (Filled)

  Choose None when the design supplies the whole class list itself (a .navbar-toggler, a .dropdown-item, a bare .nav-link), no base class and no Canvas size/shape/colour modifiers are added.

  ChoicesDefault (Filled)3DBorder (Outline)DarkGradientBootstrap (.btn)None (no base class)

Style tab

• Text Color

  A style control in the Button group of the Style tab. It has a hover state as well as a resting one.

• Background Color

  A style control in the Button group of the Style tab. It has a hover state as well as a resting one.

• Typography

  A style control in the Button group of the Style tab.

• Horizontal Padding

  A style control in the Button group of the Style tab.

• Vertical Padding

  A style control in the Button group of the Style tab.

• Border Width

  A style control in the Button group of the Style tab.

• Border Radius

  A style control in the Button group of the Style tab.

Related

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

Other blocks in Canvas: Alerts, Code Highlight, Counters, Dividers, Dropcaps, Headings.