Button

The Button component provides a clickable element with different visual intents for various actions.

Preview

PrimarySecondaryDangerGhostDisabled

Import

import { Button } from 'meridian';

Props

Prop	Type	Default	Description
intent	"primary" | "secondary" | "danger" | "ghost"	primary	Visual style intent of the button

Usage

Basic

<Button>Click me</Button>

Intents

Use the intent prop to change the visual style based on the action type:

// Primary action (default)
<Button intent="primary">Save changes</Button>

// Secondary action
<Button intent="secondary">Cancel</Button>

// Destructive action
<Button intent="danger">Delete</Button>

// Subtle action
<Button intent="ghost">Learn more</Button>

Intents

PrimarySecondaryDangerGhost

Disabled State

<Button disabled>Cannot click</Button>

Disabled

PrimarySecondaryDanger