Button

Buttons represent actions that are available to the user.

Demo

React

VariantSolidSubtleOutlineGhostUnstyled

Color schemeNeutralPrimarySecondarySuccessWarningDanger

SizeExtra SmallSmallMediumLargeExtra Large

Loading

Disabled

Click meLink ButtonWith Left IconWith Right Icon

Vue

VariantSolidSubtleOutlineGhostUnstyled

Color schemeNeutralPrimarySecondarySuccessWarningDanger

SizeExtra SmallSmallMediumLargeExtra Large

Loading

Disabled

Click me Link Button With Left Icon With Right Icon

Examples

Default button

React

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

return (
  <Button
    disabled={false}
    loading={false}
    colorScheme="primary"
    size="lg"
    variant="outline"
  >
    Click me
  </Button>
);

Vue

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

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

Button with icon

React

import {
  Button,
  Icon,
} from '@fintech-sandpit/ui/react';
import { faCheck } from '@fortawesome/free-solid-svg-icons';

return (
  <Button>
    <Icon
      as={faCheck}
      className="mr-2"
    />

    With Left Icon
  </Button>
);

import {
  Button,
  Icon,
} from '@fintech-sandpit/ui/react';
import { faCheck } from '@fortawesome/free-solid-svg-icons';

return (
  <Button>
    With Right Icon

    <Icon
      as={faCheck}
      className="ml-2"
    />
  </Button>
);

Vue

<script setup lang="ts">
import {
  Button,
  Icon,
} from '@fintech-sandpit/ui/vue';
import { faCheck } from '@fortawesome/free-solid-svg-icons';
</script>

<template>
  <Button>
    <Icon
      :as="faCheck"
      class="mr-2"
    />

    With Left Icon
  </Button>
</template>

<script setup lang="ts">
import {
  Button,
  Icon,
} from '@fintech-sandpit/ui/vue';
import { faCheck } from '@fortawesome/free-solid-svg-icons';
</script>

<template>
  <Button>
    With Right Icon

    <Icon
      :as="faCheck"
      class="ml-2"
    />
  </Button>
</template>

Button with only icon

React

import {
  Button,
  Icon,
} from '@fintech-sandpit/ui/react';
import { faCheck } from '@fortawesome/free-solid-svg-icons';

return (
  <Button iconOnly>
    <Icon as={faCheck} />
  </Button>
);

Vue

<script setup lang="ts">
import {
  Button,
  Icon,
} from '@fintech-sandpit/ui/vue';
import { faCheck } from '@fortawesome/free-solid-svg-icons';
</script>

<template>
  <Button icon-only>
    <Icon :as="faCheck" />
  </Button>
</template>

Link button

React

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

return (
  <Button asChild>
    <Link href="#">
      Link Button
    </Link>
  </Button>
);

Vue

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

<template>
  <Button as-child>
    <Link href="#">
      Link Button
    </Link>
  </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
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
as-child	boolean		false	Use the provided child element as the default element

Events

React

Name	Arguments	Description
onClick	MouseEvent	Click event

Vue

Name	Arguments	Description
click	MouseEvent	Click event

Types

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