Button

Base Foundry stack

Buttons are everywhere in web design. The Button stack allows you to create stylish buttons with ease that can link to just about anything.

  • Style buttons using presets or custom colors
  • Opt to use a gradient for styling your button
  • Use an outline style button with presets
  • Set button alignment at each breakpoint
  • Set button font using Typeface font assignments
  • Set font weight when using Typeface fonts
  • Include icons with button text
  • Add drop shadow to button
  • Create full-width block buttons
  • Add Tooltips*
  • Set your button links just like you would any other link in RapidWeaver
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example

Using Button

General

Button Text
Insert your custom text that will appear on your button.

Remove Base Margin v2
Allows you to disable the preset, standard spacing that is applied to the bottom of the Button stack. This is enabled by default to match the previous way the stack worked prior to Foundry v2.

Font v2
Allows you to choose to use the Base Font assigned in the Foundry Control Center or to assign a Typeface based font to your Button text.

Font Weight v2
Use this setting to adjust the font weight of your Button text when you've assigned them a Typeface font. If you're using the Control Center's Base Font instead of a Typeface font your font weight will be set to match the Base Font's settings.

Link

Link
Provide a link to a URL, whether it be an internal page or an external link. You can also set the following tags in the RapidWeaver link dialog:

  • Class
  • ID
  • Rel
  • Target

Icon v2

Icon
When enabled you're given the ability to choose an icon to add to your button. Additionally you can also choose whether the icon will be placed on the left- or right-hand side of your button's text.

Style

Alignment
Allows you to set the justification of the Button itself. You can set the alignment to Left, Center or Right. You're able to set the of the button at each of the individual breakpoints.

Button Size
Choose the size of your button. You can opt of a Small, Standard or Large button size.

Button Style
Set the color of the Button to match your site using one of Foundry’s color swatch presets or make use of custom color pickers. You can also opt for a gradient background which will allow you to use a series of custom color pickers to design your own gradient.

Block Button
Enable to make the Button span the entire width of its parent stack. The button’s width is flexible when enabled and will size down to fit the available space.

Outline
When using one of the color swatch presets you can use the Outline feature to inverse the button’s style.

Button Shadow v2

Shadow
Enable this setting to add a drop shadow to your button. You'll be presented with other options then to configure how the button's shadow appears.

Disable at Mobile Breakpoint
This feature will automatically turn off your drop shadow when your page is viewed at the mobile breakpoint.

Vertical & Horizontal Offset
You can set a custom vertical and horizontal offset for your shadow independent of one another. In addition you can also set those offsets to be different at each of the individual breakpoints.

Blur
This setting determines how crisp or soft your drop shadow will appear.

Color
Allows you to choose the color of your drop shadow.

  • Please Note: When Shadow is enabled the Overflow for all of its parent stacks will be set to visible.

Advanced

Tooltip
Add a popup tooltip to your Button. You can then set the tooltip text and its location, which can be set to either bottom, top, left or right.

  • Please Note: For Tooltips to work you must enable Tooltips in the Theme Vairations within the Foundry theme's settings!
Insight
Added Depth

Add a little depth back into your design by giving your buttons a nice subtle drop shadow. You can enable the Button stack's drop shadow in the Button Shadow section of its settings.