Introduction

The secondary 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 secondary 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 secondary 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 secondary button is different from other types of buttons in the following ways:

Primary Button: The primary button is a prominent button within a user interface that represents the main or most important action for a specific screen or task. It carries higher visual weight and is designed to stand out from other buttons on the interface. The primary button is typically used to initiate a primary or essential action, such as submitting a form, confirming a selection, or initiating a critical process.

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.

Secondary Button Sizes

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

Secondary Button Colors

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

Secondary Button States

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

indreka-secondary-button component

The <indreka-secondary-button></indreka-secondary-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

<indreka-secondary-button>Text</indreka-secondary-button>

we can pass attributes inside like:

1. disabled <indreka-secondary-button disabled>Text</indreka-secondary-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-secondary-button type="submit">Text</indreka-secondary-button> <indreka-secondary-button type="reset">Text</indreka-secondary-button>

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

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

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

4. describerId <indreka-secondary-button describerId="describerElement">Text</indreka-secondary-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-secondary-button';

Now, we can use the component in template as:

<indreka-secondary-button>ButtonName</indreka-secondary-button>