This guide explains how to add and customize buttons within your Block Grid. It helps beginners understand the difference between a simple text link and a high-visibility button component. You’ll learn how to use the Button/Link Component to create interactive elements that stand out and drive user engagement.
The Button Component
In the uSkinned framework for Umbraco 17+, buttons are handled as dedicated components. Unlike basic text links, these modules offer specific design controls. You aren't just choosing a destination; you are defining the Size, Shape, and Color to match the importance of the action.
Primary vs. Secondary Styles
Most professional websites use a "Hierarchy" for buttons:
-
Primary Button: The main action you want the user to take (e.g., "Get a Quote"). This usually has a solid brand color.
-
Secondary Button: A less urgent alternative (e.g., "Learn More"). This is often an "outline" or "ghost" button. Understanding this foundation helps you direct your visitor's attention to the most important part of the page.
- Global Styling: You can define these brand-wide colors and shapes in the Visual Designer to ensure consistency across every page.
Watch: Creating and Styling Buttons in Umbraco 17+
This video shows how to add a button block, select its destination, and toggle between different visual styles like 'Rounded' or 'Square'.
Other Related Tutorials
-
[Tutorial] uSkinned: Working with Button Components
-
[Tutorial] Adding Icons to Your Buttons
-
[Tutorial] Configuring Global Button Styles
-
[Tutorial] Best Practices for Call-to-Action Text
Action Steps to Create a Button
-
Add a Block: Within your Grid Page, click the plus (+) icon and select the Button or Call to Action component.
-
Set the Link: Click Add Link to open the Multi-URL Picker. Choose your internal page, external URL, or PDF.
-
Choose the Style: In the component settings, look for a dropdown labeled "Button Style". Choose between "Primary," "Secondary," or "Custom."
-
Adjust Size & Alignment: Choose whether the button should be Small, Medium, or Large, and if it should sit on the Left, Center, or Right of the column.
-
Save and Publish: Click Save and Publish. Thanks to the load-balanced backoffice, your new CTA is instantly synchronized and available across all server instances.
Pro-Tip: Use Action Verbs for your button text! Instead of "Information," use "Download Info." Instead of "Contact," use "Talk to an Expert." Clear, active language increases the chances of a user clicking.