Button

Buttons represent actions that are available to the user.

Demo

React

VariantSolidSubtleOutlineGhostUnstyled

Color schemeNeutralPrimarySecondarySuccessWarningDanger

SizeExtra SmallSmallMediumLargeExtra Large

Default ButtonWith Left IconWith Right IconLoadingDisabled

Vue

VariantSolidSubtleOutlineGhostUnstyled

Color schemeNeutralPrimarySecondarySuccessWarningDanger

SizeExtra SmallSmallMediumLargeExtra Large

Default Button With Left Icon With Right Icon Loading Disabled

Usage

React

import { Button } from '@fintech-sandpit/ui/react';

return (
  <Button
    colorScheme="primary"
    size="lg"
    variant="outline"
  >
    Click me
  </Button>
);

Vue

<script setup lang="ts">
import { Button } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Button
    color-scheme="primary"
    size="lg"
    variant="outline"
  >
    Click me
  </Button>
</template>

Props

React

Name	Type	Required	Default	Description
colorScheme	ColorScheme		neutral	Color scheme
size	Size		md	Button size
variant	ButtonVariant		solid	Visual variant
disabled	boolean		false	Disabled state
loading	boolean		false	Loading state
leftIcon	IconDefinition			Left icon definition 1
rightIcon	IconDefinition			Right icon definition 1
asChild	boolean		false	Use the provided child element as the default element

Vue

Name	Type	Required	Default	Description
color-scheme	ColorScheme		neutral	Color scheme
size	Size		md	Button size
variant	ButtonVariant		solid	Visual variant
disabled	boolean		false	Disabled state
loading	boolean		false	Loading state
left-icon	IconDefinition			Left icon definition 1
right-icon	IconDefinition			Right icon definition 1
as-child	boolean		false	Use the provided child element as the default element

1. See Icons for the list of available icon definitions.

Events

React

Name	Arguments	Description
onClick	MouseEvent	Click event

Vue

Name	Arguments	Description
click	MouseEvent	Click event

Types

type ColorScheme = 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
type ButtonVariant = 'solid' | 'subtle' | 'outline' | 'ghost' | 'unstyled'