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.


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

The solid state button is the primary button that must be used as the first choice on any user action. Primary actions such as form submissions, navigation elements, confirmations etc. must use the solid state button.

/* This is the default state on the .aegov-btn class */

Outline button

The outline state button is the secondary choice. All kinds of secondary actions such as filter, sort, revealing a hidden text etc. would use the outline state button.

/* Acheived by adding the .btn-outline to the .aegov-btn class */

Soft button

The soft state button must be used along side a solid state button in the event of a choice where the second choice needs less emphasis. Refer to the modal component for examples.

/* Acheived by adding the .btn-soft to the .aegov-btn class */

Link button

The link button is to be used where there is least emphasis required. In the event there are 3 choices to be made, the link button would be the one with the least emphasis - essentially you want the user to only click on if required.

/* Acheived by adding the .btn-link to the .aegov-btn class */

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 ...


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;/* 48px */ padding-left, padding-right: 1.5 rem;
btn-lg height: 3.25 rem; /* 52px */ padding-left, padding-right: 1.75 rem;

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.


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.


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


  • 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.


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 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 rem padding 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 rem to 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.