The Standard Button Component provides a simple and versatile way to add buttons to your web page. It can be used for call-to-action buttons, submit buttons, or links. The component also offers several styling options that can be adjusted to meet the needs of your page.
Live Example
Options and Variations
Button Color
There are multiple color options that can be applied to the button. The light gray is standard and is appropriate for use in most cases. The button should always be in contrast to the background it is placed on. For the sake of consistency and visual appeal it is recommended to use only one or two different color variations on a page.
Button Size
There are three different button sizes that are available for use which can be changed based on how prominently the button should be in relation to its surrounding content.
Button Width
The design system offers two button width variations. The default width is recommended for most cases the full width option can be used for call-to-actions that require an extra level of prominence.
Button Alignment
The button component can be aligned to the left, center or right of whichever component is nested in.
Button Margins
There are multiple settings to adjust the space above and below the button component.
Margin Bottom
This is no bottom margin applied to this button. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is an extra small margin applied to this button. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is an small margin applied to this button. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is a medium margin applied to this button. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is a large margin applied to this button. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is an extra large margin applied to this button. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
Margin Top
This is no top margin applied to this button. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is an extra small top margin applied to this button. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is a small top margin applied to this button. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is a medium top margin applied to this button. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is a large top margin applied to this button. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is an extra large top margin applied to this button. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
Usage
Do...
- Keep button text concise and clear.
- Use buttons to highlight important actions for users.
- Use buttons to submit form data.
- Use consistent styling for buttons across your site.
- Label buttons with action-oriented text (e.g., “Submit,” “Learn More”).
Don't...
- Put full sentences of text inside a button.
- Use too many buttons on a single page. It can overwhelm users.
- Use buttons for unnecessarily; regular links often work just as well.
- Choose button color just for aesthetics. Readability and appropriateness are more important.
Accessibility
- When selecting button styles, choose ones that stand out against the background. Avoid styles that blend in, as visually impaired users may have difficulty seeing the button.