Overview

The button component is used everywhere throughout SOROS. There are multiple variants and sizes for buttons.

Usage

• Ensure the button has a clear, concise label that indicates its action (e.g., "Submit", "Cancel").
• Choose the appropriate button size for your design (small, default). Make sure it fits well within the layout.
• Use the correct color for the button to indicate its purpose. For example, use a primary color for main actions, a secondary color for less important actions, and a brand color for SOROS-specific actions.
• If needed, include an icon within the button to enhance understanding of its function. Ensure the icon aligns with the label and does not overcrowd the button.
• Make sure buttons are accessible by using sufficient contrast for the button color vs the page color.

Variants

The button component consists of four variants: primary, secondary, brand primary, and brand secondary. The button's color, text color, and icon color change based on the variant. There is an option for an icon prefix and an icon suffix. The buttons are available in two sizes: default and small.

Default:

With Icon: