Skip to content

Learning Studio / features

Configure button blocks

Set the label, link address, style, and alignment of a button block in the inspector.

A button block gives learners a clear, labeled link to an external resource. Use it when you want to send learners somewhere specific — a registration page, a reference site, or a tool to try.

  1. Select a button block on the page. The inspector shows its properties.
  2. In Button label, write the text learners will see on the button. The label is limited to 80 characters.
  3. In Link address, paste the destination URL. The address must start with https:// — the button opens in a new tab.
  4. Under Style, choose Filled for a solid button or Outline for a bordered button.
  5. Under Alignment, choose Left, Center, or Right to position the button on the page.

If the link address doesn’t start with https://, the inspector shows a warning and the address won’t save.

A button works well at the end of a page or section, where learners are ready to act on what they’ve read. Keep the label short and action-oriented — for example, “Register now” or “Try the demo” — so learners know what to expect before they click.

Buttons open external links in a new tab. There’s no built-in option to link to another page within the same course.

  • Button blocks are available in the course editor and visible in the learner preview.
  • The Button label field accepts up to 80 characters.
  • The Link address must be an https:// URL; other addresses won’t save.
  • Style options are limited to Filled and Outline. There are no additional color or size controls specific to buttons.
  • Alignment options are Left, Center, and Right.
  • Buttons always open links in a new tab; there’s no setting to change this.
In learner preview, a button block renders as a link that opens the configured URL in a new tab. Full-resolution PNG
On phone viewports, the button link opens the same external URL in a new tab. Full-resolution PNG
The inspector shows button block properties: label, link address, style, and alignment. Full-resolution PNG
The button block inspector is accessible through the inspector drawer on phone-width screens. Full-resolution PNG

In the learner preview, a button with a valid URL renders as a link that opens the destination in a new tab with rel="noopener noreferrer". In the editor, or when no link address is set, the button is non-interactive so you can select and edit it without navigating away.

Last updated · Osprey v0.23.0

Same update, your timezone

Pacific · Oct 29
Central · Oct 29
Eastern · Oct 29

Made with love by the team at EdStratum Labs AI