Button

Buttons represent actions that are available to the user.

Demo

React

VariantSolidSubtleOutlineGhost

Color schemeNeutralPrimarySecondarySuccessWarningDanger

SizeExtra SmallSmallMediumLargeExtra Large

Loading

Disabled

Click meLink ButtonWith Left IconWith Right Icon

Vue

VariantSolidSubtleOutlineGhost

Color schemeNeutralPrimarySecondarySuccessWarningDanger

SizeExtra SmallSmallMediumLargeExtra Large

Loading

Disabled

Click me Link Button With Left Icon With Right Icon

Examples

Default button

React

// Import component
import { Button } from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/button.css';

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

Vue

<script setup lang="ts">
// Import component
import { Button } from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/button.css';
</script>

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

Button with icon

React

// Import components
import {
  Button,
  Icon,
} from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/button.css';
import '@fintech-sandpit/ui/style/components/icon.css';
// Import icon
import { faCheck } from '@fortawesome/free-solid-svg-icons';

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

    With Left Icon
  </Button>
);

// Import components
import {
  Button,
  Icon,
} from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/button.css';
import '@fintech-sandpit/ui/style/components/icon.css';
// Import icon
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 components
import {
  Button,
  Icon,
} from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/button.css';
import '@fintech-sandpit/ui/style/components/icon.css';
// Import icon
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 components
import {
  Button,
  Icon,
} from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/button.css';
import '@fintech-sandpit/ui/style/components/icon.css';
// Import icon
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 components
import {
  Button,
  Icon,
} from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/button.css';
import '@fintech-sandpit/ui/style/components/icon.css';
// Import icon
import { faCheck } from '@fortawesome/free-solid-svg-icons';

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

Vue

<script setup lang="ts">
// Import components
import {
  Button,
  Icon,
} from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/button.css';
import '@fintech-sandpit/ui/style/components/icon.css';
// Import icon
import { faCheck } from '@fortawesome/free-solid-svg-icons';
</script>

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

Link button

React

// Import components
import {
  Button,
  Link,
} from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/button.css';
import '@fintech-sandpit/ui/style/components/link.css';

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

Vue

<script setup lang="ts">
// Import components
import {
  Button,
  Link,
} from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/button.css';
import '@fintech-sandpit/ui/style/components/link.css';
</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 rendered element, combining their props and behavior

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 rendered element, combining their props and behavior

Events

React

Name	Arguments	Description
onClick	MouseEvent	Click event

Vue

Name	Arguments	Description
click	MouseEvent	Click event

Types

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