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.

Layout and Styling Options

Color

Grey (default)
Primary
Secondary
Tertiary
White
Danger

Size

Small
Default (medium)
Large

Width

Default
Full Width

Alignment

Left
Center
Right

Margin bottom

None
X-Small
Small
Medium
Large
X-Large

the end

Margin top

None
X-Small
Small
Medium
Large
X-Large

the end

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

  • Avoid putting full sentences of text inside a button.
  • Limit the number of buttons on a single page to prevent overwhelming users.
  • Use buttons for navigation only when necessary; regular links often work just as well.
  • Choose button colors for readability and appropriateness, not just aesthetics.

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.