Content module

Button block

A call-to-action button in the Donix style — primary, dark, outline or text link — with an optional icon.

Overview

The Button block adds a single, clearly styled button to your page. It comes in four styles (a coral Primary button, a Dark button, an Outline button and a plain Text link), three sizes and an optional icon before or after the text. It can link to any page or website.

Behind the scenes the button is a real HTML link, so it works with keyboards, screen readers and search engines.

At a glance

Block name: wpbb/button
Module: Content
Find it by searching: Button
Loads JavaScript on the site: No

When and why to use it

Lead visitors to your most important action: “Book a call”, “Buy now”, “Get started”.
Place a secondary action next to a primary one (for example a Dark or Outline button next to a Primary one).
Add a “Read more” or “View all” link at the end of a section with the Text link style.

Example scenarios

Hero section: a large Primary button “Start a Project” linking to your contact page, with an arrow icon after the text.
Pricing: a full-width Dark button under each price, so the buttons line up neatly.
Blog: a Text link “All articles →” under a list of recent posts.

See it in action

These are live examples: real Button blocks rendered by WordPress with the plugin’s own styles and scripts. Use the buttons to see how they adapt to tablet and phone screens.

The four styles — Primary, Dark, Outline and Text link. Point at them to see the hover effects.

Open in a new tab

Sizes and full width — Small, medium and large buttons, and a full-width button.

Open in a new tab

How to add the Button block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Button in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Button in the results. The block appears with the text “Start a Project” and an arrow icon.
Configure the content. Edit the text directly on the block, then open the Settings tab (gear icon) in the right-hand sidebar for the options described below. If the sidebar is hidden, click the gear icon in the top-right corner.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

On the block (in the editor canvas)

Button text

What it does: The words on the button.
What to enter or choose: A short action phrase — two to four words is ideal.
Default: Start a Project
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: Always. Replace the sample text with your own.
Example: “Get a free quote”.
Result: The button shows your text. Bold and italic are allowed.
Good to know: If the text is empty, the button is not shown on the site at all.

Settings panel: Button

Style

What it does: The overall look of the button.
What to enter or choose: One of: Primary (brand), Dark, Outline, Text link.
Default: Primary (brand)
How to use it: Open the dropdown and pick an option.
When to use it: Use Primary for the single most important action on a screen, Dark or Outline for secondary actions, and Text link for low-priority links.
Example: Primary “Buy now” next to an Outline “Learn more”.
Result: Colours, border and hover effect change instantly in the editor.

Size

What it does: The height, padding and text size of the button.
What to enter or choose: One of: S (small), M (medium), L (large).
Default: M (medium)
How to use it: Click one of the buttons in the group.
When to use it: L for hero sections, M for most content, S for compact areas such as cards.
Example: L for the main button in your page header.
Result: The button gets bigger or smaller.

Full width

What it does: Stretches the button across the full width of its column.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Inside narrow columns, cards and pricing tables, and on forms.
Example: Turn it on for the buttons under three pricing plans so they line up.
Result: The button fills the width; the text stays centred.

Settings panel: Link

Link

What it does: The page the button goes to when clicked.
What to enter or choose: A web address (https://…) or a page, post or file on your site. Start typing a page title to search your site.
Default: Empty
How to use it: Click the link button, then paste an address or search for a page on your site and press Enter.
When to use it: Almost always — a call to action should lead somewhere.
Example: Type “Contact” and pick your Contact page, or paste https://example.com/pricing.
Result: The button becomes a real link.
Good to know: Two extra switches appear once a link is set.

Open in new tabShown when a link is set

What it does: Opens the link in a new browser tab.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: For links to other websites or documents (PDFs) you do not want visitors to lose your page for.
Example: A link to your booking platform.
Result: The link gets target="_blank" and rel="noopener" for security, and screen readers hear “(opens in a new tab)”.
Good to know: Avoid it for normal links inside your own site — visitors can choose to open a new tab themselves.

Add rel="nofollow"Shown when a link is set

What it does: Tells search engines not to pass ranking credit to the linked page.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: For paid, sponsored or untrusted links.
Example: An affiliate link to a product.
Result: The link gets rel="nofollow". Visitors see no difference.

Settings panel: Icon

This panel starts closed; click its title to open it.

Icon

What it does: An optional icon next to the text.
What to enter or choose: Any icon from the bundled library, or None.
Default: arrow-right
How to use it: Click the icon button to open the icon library, search by name (for example “arrow” or “phone”) and click an icon. “None” removes it.
When to use it: Arrows suggest “go somewhere”; a download icon sets expectations for a file.
Example: “arrow-right” after “Start a Project”.
Result: The icon appears at 18px next to the text and inherits the text colour.

Icon positionShown when an icon is chosen

What it does: Puts the icon before or after the text.
What to enter or choose: One of: Before, After.
Default: After
How to use it: Click one of the buttons in the group.
Example: Arrows usually go after the text, download icons before.
Result: The icon moves to the other side of the text.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Button offers.

Element: Button selected first

The button itself — its text, background, border, corners and shadow. This is the part you will style most often.

Styles-tab controls for “Button”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover, Focus, Active
Colors	Text	—	Normal, Hover, Focus, Active
Background	Type	—	Normal, Hover, Focus, Active
	Color / Gradient	—	Normal, Hover, Focus, Active
	Image	—	Normal
Border	Border type	—	Normal, Hover, Focus, Active
	Border	—	Normal, Hover, Focus, Active
	Radius	Yes	Normal
	Focus indicator	—	Focus
Box Shadow	Remove shadow	—	Normal, Hover, Focus, Active
Box Shadow	Shadow layers	—	Normal, Hover, Focus, Active
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Hover, Focus, Active

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Focus — When it has keyboard focus — reached with the Tab key. Mouse clicks usually do not show focus styles.
Active — While it is being clicked or pressed.

Element: Block

The outer wrapper of the block. Use it for the space around the button, its position and per-device visibility.

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Spacing	Margin	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Effects	State transition (ms)	—	Normal
Effects	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Icon

The optional icon inside the button.

Styles-tab controls for “Icon”
Panel	Control	Per device	Available in states
Colors	Text	—	Normal, Hover
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Font size, Line height, Letter spacing, Alignment, Radius, Padding, Width, Max width, Height, Min width / Min height / Max height, Opacity (%), Margin, Position, Top / Right / Bottom / Left, Z-index, Overflow.

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.

How it works on your site

The button is a normal link (<a>) when a link is set, and a plain label when it is not. It has built-in hover and focus styles for each Style. No JavaScript is loaded.

Accessibility

The button is a real link, so it works with the keyboard (Tab to reach it, Enter to follow it).
Links that open in a new tab announce “(opens in a new tab)” to screen-reader users.
Write specific text (“Download the brochure”) rather than “Click here” — screen-reader users often browse a list of links out of context.
If you change colours in the Styles tab, keep enough contrast between text and background (at least 4.5 : 1).

Tips and best practices

Use one Primary button per section; too many strong buttons compete for attention.
For two buttons side by side, place them in a Container with the Horizontal layout.
Add a hover state in the Styles tab (Element: Button, State: Hover) to give visitors feedback — for example a slightly darker background.

Limitations and notes

One button per block. Use a Container to group several buttons.
The button text supports bold and italic only.
Without a link the button is only a label: it cannot be clicked.

Troubleshooting

My button does not appear on the published page.

Check that the button has text — a button with empty text is not shown. Also check the Visibility panel in the Styles tab: the button might be hidden on this device.

Clicking the button does nothing.

Open the Link panel and make sure a link is set. Without a link the button is not clickable.