Introduction

The primary button is a fundamental component of our design system. It is a prominent call-to-action button that is used to initiate an action or progress through a workflow.

Anatomy

The primary button is composed of the following elements: The text displayed on the button, an icon (optional) that accompanies the label and the background color of the button.

Usage

The primary button is used to provide users with select/deselect option, and they can chose it like yes/no. It is typically used in forms, questionnaires, and surveys. The Checkbox is also used in filters, search options, and settings where users need to select/deselect some options. When designing a Checkbox, it is important to consider their accessibility, usability, and visual design.

Differences from Other Button Types

The primary button is different from other types of buttons in the following ways:

Secondary Button: The secondary button is a less prominent button that is typically used for secondary actions or to provide additional options. It has a lower visual weight and is often used in combination with the primary button.

Text Button: The text button is a button with no background or border that is used to emphasize text. It has a low visual weight and is used in combination with other buttons or as a standalone element.

Icon Button: The icon button is a button that displays an icon without any label or background. It has a low visual weight and is used in combination with other buttons or as a standalone element.

Primary Button Sizes

The table below provides the size specifications: | Size | Height | | ------------- | ------ | | Mobile | 40 px | | Tablet | 42 px | | Web/Desktop | 44 px |

Primary Button Colors

The table below provides the color specifications: | Color | Hex code | | --------- | ------- | | Primary-1 | #FFB42A | | Neutral-1 | #262626 | | Neutral-2 | #6C6969 | | Neutral-3 | #FFFFFF |

Primary Button States

The Primary Button component has several states, depending on the user's interaction with it | Color | Description | | -------- | ---------------------------------------------------------------------- | | Default | The initial state of the Primary Button component | | Hover | When the user hovers the mouse pointer over the Primary Button | | Pressed | When the user clicks on the Primary Button component | | Disabled | When the Primary Button is not available for interaction |

indreka-primary-button component

The <indreka-primary-button></indreka-primary-button> component having the following attributes:

1. type having type of string.
2. label having type of string.
3. disabled having type of boolean.
4. describerId having type of string.

Attributes and usage

we can pass attributes inside like:

1. disabled <indreka-primary-button disabled>Text</indreka-primary-button>

-- This will disable the button preventing the user to perform any mouse events on button and also update the aria-disabled.

2. type <indreka-primary-button type="submit">Text</indreka-primary-button> <indreka-primary-button type="reset">Text</indreka-primary-button>

   -- type has two values: submit and reset, submit will enable form submission and reset will reset the form fields.

3. label <indreka-primary-button label="labelName">Text</indreka-primary-button>

   -- This will add a label which will be shown for aria-label property.

4. describerId <indreka-primary-button describerId="describerElement">Text</indreka-primary-button>

   -- Describer id will require the name of an element that is describing the button/any information about button. will update aria-describedby.

Angular Usage

In the module.ts, import the component after installing from NPM.

import 'indreka-primary-button';

Now, we can use the component in template as:

<indreka-primary-button>ButtonName</indreka-primary-button>