Overview

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.

Preview

Button

Code

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

export function Demo() {
  return <Button label="Button" />;
}

About

This is an original component from Inpulse.

It has five possible variations, each with its own purpose: Primary, Secondary, Outline, Ghost, and Link. You can also use the pill property to create a pill-shaped button and customize its size with the size property.

This component also features a ripple effect that simulates a pressing effect when clicked, which can be disabled via the useRipple property.

Additionally, it supports a loading state that can be activated via the loading property - fully integrated with the Loading component.

Installation

pnpm

pnpm add @inpulse-ui/button

bun

bun add @inpulse-ui/button

yarn

yarn add @inpulse-ui/button

npm

npm install @inpulse-ui/button

API Reference

Root

The main component that renders the button.

Prop	Type	Default Value	Required
asChild	boolean	false	No
icon	boolean	false	No
loading	boolean	false	No
pill	boolean	false	No
size	enum	xssmmdlg	No
useRipple	boolean	true	No
variation	enum	primarysecondaryoutlineghostlink	No

Usage

Wrap any content inside the <Button> component to create a button and apply variations, sizes, and other properties to customize it as needed.

<Button>
  Click me!
</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.

Preview

Button

Code

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

export function Demo() {
  return <Button label="Button" />;
}

Pill

Preview

Button

Code

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

export function Demo() {
  return <Button label="Button" 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.

Preview

Code

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

export function Demo() {
  return <Button label="Button" loading />;
}

Secondary

Preview

Button

Code

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

export function Demo() {
  return <Button label="Button" variant="secondary" />;
}

Outline

Preview

Button

Code

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

export function Demo() {
  return <Button label="Button" variant="outline" />;
}

Ghost

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

Preview

Button

Code

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

export function Demo() {
  return <Button label="Button" variant="ghost" />;
}

Link

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

Preview

Button

Code

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

export function Demo() {
  return <Button label="Button" variant="link" />;
}

Sizes

The button component supports the following sizes: xs, sm, md, lg.

Preview

ButtonButtonButtonButton

Code

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

export function Demo() {
  return (
    <>
      <Button label="Button" size="xs" />
      <Button label="Button" size="sm" />
      <Button label="Button" size="md" />
      <Button label="Button" size="lg" />
    </>
  );
}

Icon

Preview

Code

import { Button } from '@inpulse-ui/button';
import { Gear } from '@inpulse-ui/icons';

export function Demo() {
  return (
    <Button label="Button" size="md" icon>
      <Gear />
    </Button>
  );
}

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.

Preview

Code

import { Button } from '@inpulse-ui/button';
import { Gear } from '@inpulse-ui/icons';

export function Demo() {
  return (
    <Button label="Button" size="md" icon loading>
      <Gear />
    </Button>
  );
}