Buttons

Types of Buttons

Primary Buttons: These are the main call-to-action (CTA) buttons. They are prominent and used for the most important actions, like 'Submit', 'Save', or 'Continue'.

Secondary Buttons: Less prominent, these are used for less crucial actions. They often have a subtler design compared to primary buttons.

Tertiary Buttons: Used for the least prioritized actions, they are often more minimalistic, sometimes styled only as text.

Design Attributes

Size: Buttons come in various sizes (small, medium, large, extra large) to fit different spaces and importance levels.

Color: Primary buttons often use the brand’s main color to stand out, while secondary and tertiary buttons might use less prominent colors.

Shape: Rounded corners are common for a friendly appearance, but some systems might use sharp edges for a more formal look.

Icons: Some buttons include icons to help convey their purpose, like a search icon on a search button.

Style: DesignCode UI provides three button styles—Glass, Outline, and Flat—each with specific design attributes to suit your project needs:

States

Normal: The default state of a button.

Hover: Changes when a user hovers over the button with a cursor. Often involves a slight color change or shadow to indicate interactivity.

Active/Pressed: When the button is clicked or tapped. This state might show the button as ‘pressed down’.

Disabled: Indicates the button cannot be interacted with. Usually, the button appears faded or greyed out.

Accessibility

Contrast: Buttons should have sufficient color contrast to be easily distinguishable from their background.

Labeling: Text on buttons should be clear and concise. Additionally, proper ARIA (Accessible Rich Internet Applications) labels are important for screen readers.

Responsive and Adaptive Design

Adaptability: Buttons should resize or reflow appropriately in different devices and screen sizes.

Touch Targets: On mobile devices, buttons should be large enough to be easily tapped.

Guidelines for Use

Consistency: Use buttons consistently across the application. For example, a ‘Save’ button should look the same in all contexts.

Hierarchy: Ensure that the visual hierarchy of buttons corresponds to their importance. Don't overwhelm users with too many primary buttons.

Integration with Other Components

Buttons often need to work in conjunction with other UI elements, like forms, modals, or cards. Ensuring they fit seamlessly within these contexts is key.

Create your first button for the design system

Firstly, either create a new template or select a page within your design system specifically for buttons. For our example, we'll refer to this page simply as "Buttons."

► Watch the video

Organizing Your Buttons

Ideally, you should have a minimal number of button variants to maintain simplicity. However, depending on your design's complexity, you may have multiple styles and variants to provide the necessary flexibility.

Creating a Button

Add Text to Your Button:
Use the text tool (often shortcut 'T') to add your button's text.
Apply the "Body" text style, choosing between "Regular" and "Medium" based on the emphasis you want to give your text.



Incorporate an Icon:
If your design calls for it, add an icon (Shift + I) to your button.
Use the design system’s Icons library to select an appropriate icon, such as a chevron right.



Set Colors and Styles:
Use variable foreground and background colors for adaptability between light and dark modes.
Select text and icon colors that are part of your design system's predefined styles.



Using Auto Layout:
Combine the text and icon using auto layout features (Shift + A).
Adjust Variable button padding and gap to ensure visual balance.
Apply corner radius and any additional styling as per your design system's guidelines.



Component Properties:
Convert your button into a reusable component.
Define properties for text and icon, allowing for easy adjustments and variations.



Testing Your Button
Once created, test your button in various contexts within your design, adjusting properties as needed for the best visual and functional fit.



You've now created a button that's not only visually appealing but also perfectly integrated into your design system. This button can be easily adapted and reused across your projects, ensuring consistency and efficiency in your design workflow.