Buttons

Overview

Buttons are used to trigger actions in the UI. They can be used to submit forms, navigate to other pages, or perform other actions.

In the FAO Design System, buttons are designed to be clear, accessible, and consistent across different contexts. They come in various styles and sizes to accommodate different use cases and visual hierarchies within your interface.

Key considerations when using buttons:

• Use clear and concise labels that describe the action the button will perform
• Choose the appropriate button style based on the importance and frequency of the action
• Ensure sufficient contrast between the button and its background for accessibility
• Provide visual feedback for hover, focus, and active states
• Consider using icons alongside text to reinforce the button's purpose

By following these guidelines, you can create an intuitive and user-friendly interface that guides users through your application effectively.

Default buttons

The buttons used in most cases:

These default button styles are versatile and can be applied across a wide range of scenarios in your user interface. They provide clear visual cues to users about the importance and function of each action:

• Primary: Use for the main action on a page or in a section. It should stand out and guide the user's attention to the most important or frequently used action.
• Secondary: Ideal for alternative actions that are still important but not the primary focus. These complement the primary button without competing for attention.
• Outline: Perfect for less emphasized actions or in situations where you want a more subtle visual impact while still maintaining the button's clickable appearance.

When implementing these buttons, consider the context and hierarchy of actions on your page to choose the most appropriate style for each situation.

Button Icon

Buttons can also be used to display icons. This is a great way to add visual cues to your buttons.

Button Icon Large

Large buttons are a great way to add visual cues to your buttons.

Button Icon Link

Button icon links provide a compact, visually appealing way to represent clickable actions.

Button Icon Round

Round icon buttons offer a compact and visually striking way to represent clickable actions. These circular buttons are ideal for interfaces where space is limited or when you want to create a clean, modern look. They're particularly effective for common actions like navigation, social media sharing, or toggling settings.

When using round icon buttons, ensure that the chosen icons are clear and universally understood to maintain usability. These buttons can be especially useful in mobile interfaces or as floating action buttons in material design-inspired layouts.

Button Icon Round Large

A larger version of the round icon button.

Button Icon Round Side

Button Icon Round Side components are a variation of round icon buttons that are designed to be positioned along the sides of a container or viewport. These buttons are particularly useful for creating floating action menus or quick access controls that remain easily accessible without obstructing the main content. They can be used for functions like sharing, messaging, or accessing help, providing a consistent and visually appealing way to offer these actions across different pages or sections of your application.