Button
A button in HTML is a clickable UI component, designed to trigger a specific action or event. Essential in web interfaces, they guide user interactions, from form submissions to navigation.
Introduction
A button is perhaps the most important and a key component in a design system. It can form the basis of every other component's design. The button defines the ability to communicate an action and if very useful in the ability to accept submissions and guide the user through the website.
Visual representation
The following is a visual representation of a button in use along with it's code usage.
There are 4 button types and these have to be used in accordance to the state of how you want to collect data from a user, or provide the user with certain choices.
| Type | Properties |
|---|---|
Solid button |
|
Outline button |
|
Soft button |
|
Link button |
|
Code structure
The following is the basic code structure of a button that is part of the UAE Design System.
<button class="aegov-btn {btn-style} {btn-size} {btn-colour}" type="button">
... Button label text ...
</button>A button a clickable object, which can be used in forms or anywhere in a document that requires interactive user input without necessarily navigating away. A button must be used when there is a need to trigger an action.
Do not use a button for the purpose of a navigation. If you need the user to navigate from one page to another, always use an anchor. An anchor can be styled to look like a button in some cases. Refer to the Hyper Link component for more information on when to use the hyper link (or an anchor) to look like a button.
Variations
Variations are different versions of this component that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.
A button defines variations in terms of size, use of icons and only icon sets.
Size variations
A button can be defined as an extra small, small, base and large button. When building responsive websites, you must add size variations linked to screen size's defined in the config.
Remember, the default size on the ` aegov-btn ` class is ` btn-base `
| Class | Properties |
|---|---|
btn-xs |
height: 2 rem; /* 32px */ padding-left, padding-right: 1 rem;
|
btn-sm |
height: 2.5 rem; /* 40px */ padding-left, padding-right: 1.25 rem;
|
btn-base |
height: 3 rem; |
btn-lg |
height: 3.25 rem; /* 52px */ padding-left, padding-right: 1.75 rem;
|
The use of the btn-xs is not recommended unless absolutely necessary.
With left icon
Buttons are supported with icons that can be added as a prefix to the button label. Here are examples of how an icon will be added to the left of the button label.
When adding an <svg> to a button, the UAE Design System will apply the appropriate colour and size and manage the hover state colour for icons based on the button style.
With right icon
Buttons are supported with icons that can be added as a suffix to the button label. Here are examples of how an icon will be added to the right of the button label.
When adding an <svg> to a button, the UAE Design System will apply the appropriate colour and size and manage the hover state colour for icons based on the button style.
With dual icons
Buttons are supported with icons that can be added as a prefix and suffix to the same button object. Here are examples of how a set of icons can be added to a button on both sides.
Only icon
In many instances, you may need to provide a button on your interface that is represented with only an icon. It is acceptable to use such an element with the interface demands it, as long as it is correctly labeled and support for screen readers is added.
Use of secondary colour
All form elements in the UAE Design System support the use of secondary colour.
Here is an example of the button element in secondary colour. By default, the " aeblack " colour is the default secondary colour used. Refer to the colour system guideline for more information on default colours to be used.
Behaviour
A button's behavior in HTML revolves around user interaction and the roles it can fulfill within the page of a website or web application.
Without any action attached to a button, its default behaviour only includes the ability to change it's appearance on a hover and focus state. The real utility emerges with scripting and context is added to a button
It's crucial to use buttons appropriately and understand their behavior in various contexts.
State
By default, the ` hover ` and ` focus ` state of a button is triggered when a user interacts with the element. The ` disabled ` status is set via scripting.
Disabled state
By adding a ` disabled ` attribute to a button, you will essentially tell the browser that the button is unusable. Disabled state for a button would render it visually lighter. Add the ` aria-disabled="true" ` attribute to buttons disabled as well as an added measure for assistive technologies.
Focus state
Adding a focus state to buttons is default in the UAE Design System and the focus state for the different button styles have been added in to highlight the button when in focus.
Try this out by clicking anywhere in the example box and pressing "Tab"
Hover state
To visually style a button and indicate a hover state is mandatory. The hover state must showcase a change in the style which is significant.
Try this out by hovering over buttons within any of the example's on this documentation page
Accessibility
- Buttons should be navigable and usable via keyboard. Users should be able to reach a button using the ` Tab ` key and activate it using the ` Enter ` or ` Space ` key.
- Buttons should have descriptive labels that clarify their purpose. This can be achieved through the button's inner text or, when using an icon without textual description, via the
` aria-label="" `attribute. - It should be visually clear when a button has keyboard focus.
- When a button is used as a toggle, or using a button changes it's state and indicates a true/false change on the page, this should be communicated to assistive technologies. This can be achieved with ARIA attributes such as
` aria-pressed="true/false" `. Remember to use this only if the state of the button changes. You may also want to consider using the toggle component if the purpose is to initiate a true/false state. - Avoid using coloured button as meaning only. For example, having 2 buttons - one in green and one in red - and both labelled with text such as "click here" is the incorrect use of a button. Using the different styles of button indicated in the UAE Design System are acceptable when supported with correct labels that explain it's context.
- Text or icons within a button should maintain a contrast ratio of at least 4.5:1 against its background to ensure readability for users with low vision. All styles of button's used for the UAE Design System by default are tested with this contrast ratio.
- If a button is disabled, it should be clearly conveyed to both sighted users (using styles) and assistive technology users. Use the
` aria-disabled="true" `on disabled state buttons along with the` disabled `attribute.
Responsive element
This component can be resized based on breakpoint prefixes.
You can always control the responsive nature of a component by adding the screen size attribute and changing the size of an element per screen size. Read more about Responsive Design and how to use breakpoint prefix for classes on TailwindCSS.com
Hence, this component's size variations can be combined with breakpoint prefixes to control the size of the component on various screensizes.
By applying the ` btn-sm `, the ` lg:btn-base ` and ` 2xl:btn-lg ` classes, the button dimensions, paddings, font size and icon size will adjust to different screen sizes, ensuring optimal visibility and usability.
RTL support
This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.
The following is an example of this component with text in Arabic.
All components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.
The typography guidelines will also provide further information on use of the font stack for the Arabic language.
Usage
A button is an interactive UI element that allows users to trigger specific actions or processes, such as form submission, data retrieval, or content display, promoting user engagement and task completion on a website or application.
Where to use a button?
Here are common use cases where a button would be appropriate.
- The submit action of a form.
- Other buttons such as reset or cancel attached to a form.
- Attached to other form elements like an input of a file upload.
- Attached to modal windows and popup's as actions buttons.
- Below articles or posts for actions like "Read More" or "Show Comments".
- To toggle sections of content (e.g., "Show/Hide Details").
- Navigating through lists or galleries (e.g., "Next", "Previous").
- Proceeding to the next section in a form or a service.
- Action items for interactive media - such as playing a video.
- Confirming or dismissing a message, alert or a notification.
- Icon buttons used for actions within the page.
- The need to download a file.
- To share content on social media or actions of sharing.
Spacing
Spacing is an essential feature of the design system. Learn more about spacing in our guidelines. The following rules are applicable towards a button.
- The button must follow a consistent pattern throughout the website or web application and must follow the sizing guidelines. At a base level, the button must be
` 3 rem (48px) `in height and according to the screen size, must resize in height to values of` 3.25 rem (52px) `,` 2.5 rem (40px) `and` 2 rem (32px) `accordingly. - The padding in a button is defined by the size variation applied. The design system applies a
1.5 rempadding to the left and right of the button text. This padding is adjusted based on the size variation applied automatically. - The font size applied by the design system by default is
1 remto the base button. Font size also scales based on the size variation. The text is vertically aligned in the center, hence always maintaining a consistent height. - When an icon is added to a button, the padding on the left and right will auto adjust to accomadate the width of the icon and based on the size variation, adjust the padding value.