Sharjah Design System نظام الشارقة للتصميم
Sharjah Design System نظام الشارقة للتصميم
عربي Government of Sharjah
Home
Typography Color system Iconography Layout and spacing Input & fields Buttons Responsive Accessibility Design tokens Content design
Get started UI Components Templates UI Kit
Roadmap

Links

Home Getting Started UI Kit

Guidelines

Typography Color system Iconography
Buttons Responsive Design Tokens

Results

Search the site for “”

Buttons

Buttons are interactive components that allow users to perform actions, submit information, or navigate through digital experiences. They play a fundamental role in guiding users toward completing tasks and should clearly communicate the action they trigger.

Buttons

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.

The solid button (also known as the primary or base button) applies monochromatic colours and makes it stand out from other elements.

The bordered or outline button has less emphasis than the primary button. Use this when you need the user to take an optional action or provide less visibility to the action in comparison to another action.

This is an alternative to the outline button. The soft button has equal priority to the outline and is usually used when the action is secondary or optional.

This button has the least priority and can be used inside card elements as a navigation action.

Button variants

Primary button

Use for the main call-to-action on a page

Secondary button

Use for secondary actions or alongside a primary button

Tertiary button

Use for subtle actions that require less emphasis

Button Components

Previous Input & fields Next Responsive