Introduction

The text button component is a simple, yet versatile button that can be used for a variety of purposes. It consists of a label or text displayed on a rectangular shape that can be clicked or tapped to trigger an action.

Anatomy

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

Differences from Other Button Types

The text button component differs from other common types of buttons in the following ways:

1. Primary button: The primary button is designed to be the main action on a page and typically has a bold color and larger size. The text button, on the other hand, is a secondary or tertiary action button with a smaller size and less prominent color.
2. Secondary button: The secondary button is similar to the text button in appearance, but it has a border that separates it from the background. The text button has no border and has a more subtle appearance.
3. 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.

Text Button Sizes

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

Text Button Colors

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

Text Button States

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

indreka-text-button component

The <indreka-text-button></indreka-text-button> component having the following property:

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

use

<indreka-text-button>Text</indreka-text-button>

we can pass attributes inside like:

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

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

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

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

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

Now, we can use the component in template as:

<indreka-text-button>ButtonName</indreka-text-button>