Button Colors & Styles
The below components will show all of the different button colors / styles on different component BG colors for quick reference.
I am using a grid in these examples, but you can reference the color setting combinations on these grids when making your setting selections within another type of component where buttons can be added, such as a text component.
When looking at the examples, you will notice that not all button colors will be legible on all background colors. I have included them all here so you can see how each one appears on the different selected component background colors, and minimize trial and error when populating content.
To check which color button is selected, you will open the grid you want to reference, then open the "button" grid component. Each button can be opened via drop down in the "content" tab of the "button" grid component (see screenshot below).
They will be in the same order in the Umbraco modal as they are when you are viewing the page.
Default Button Size - Solid
- This grid shows all color options of the button on this background color, in the "default" size and "solid" style selection.
- If a larger or smaller button is needed, you can change the size of the button.
- The "underline" and "border" styles were not part of the style guide, and are not styled to automatically work with the theme customizations.
Default Button Size - Solid
- This grid shows all color options of the button on this background color, in the "default" size and "solid" style selection.
- If a larger or smaller button is needed, you can change the size of the button.
- The "underline" and "border" styles were not part of the style guide, and are not styled to automatically work with the theme customizations.
Default Button Size - Solid
- This grid shows all color options of the button on this background color, in the "default" size and "solid" style selection.
- If a larger or smaller button is needed, you can change the size of the button.
- The "underline" and "border" styles were not part of the style guide, and are not styled to automatically work with the theme customizations.
Default Button Size - Solid
- This grid shows all color options of the button on this background color, in the "default" size and "solid" style selection.
- If a larger or smaller button is needed, you can change the size of the button.
- The "underline" and "border" styles were not part of the style guide, and are not styled to automatically work with the theme customizations.