Button

Displays a button or a component that acts like a button. This component was designed from scratch and has some embedded animations that make it unique.

Installation

pnpm add @inpulse-ds/button

Usage

import { Button } from '@inpulse-ds/button';

<Button label="Button" />

Examples

Primary

By default, all buttons that have borders (as is the case with the primary variation) have a click animation that simulates a pressing effect. This animation can be disabled via the useRipple property.

Pill

Loading

This animation can be easily activated on the button via the loading property. In a subtle way, it uses the ellipsis symbol to indicate that a process is loading.

Secondary

Outline

Ghost

In this variation, the click animation is not displayed because the element does not have borders.

Link

In this variation, the click animation is not displayed because the element does not have borders.

Icon

Icon + Loading

When the icon size is used in conjunction with the loading property, a variation of the loading animation, unique to that state, is displayed in place of the icon.