IconButton

Used to render an icon within a button.

Demo

React
Vue

Variant

Color scheme

Size

Usage

React
Vue

import { IconButton } from '@fintech-sandpit/ui/react';
import { faHome } from '@fortawesome/free-solid-svg-icons';

return (
  <IconButton icon={faHome} />
);

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

<template>
  <IconButton :icon="faHome" />
</template>

React
Vue

Name	Type	Required	Default	Description
`icon`	`IconDefinition`	Yes		Icon definition ¹
`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

Name	Type	Required	Default	Description
`icon`	`IconDefinition`	Yes		Icon definition ¹
`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

See Icons for the list of available icon definitions.

Name	Arguments	Description
`onClick`	`MouseEvent`	Click event

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'