@fvc/button

@fvc/button provides FE-VIS styled button primitives on top of Ant Design. It keeps the Ant Design button API familiar while adding the design-system behaviour used across FE-VIS applications: a full set of visual variants, shape and size controls, icon support, a loading state with optional loading text, and block layout.

Installation

bun add @fvc/button

Peer Dependencies

The package expects these dependencies to be available in the consuming application:

bun add react antd @fvc/icons

Import

import { Button } from '@fvc/button';

Quick Start

import { Button } from '@fvc/button';

export function SaveAction() {
  return (
    <Button type="primary" onClick={() => handleSave()}>
      Save
    </Button>
  );
}

Variants

| Value | Description | | --- | --- | | 'default' | Default styling. | | 'primary' | Primary action — green fill with shadow. | | 'secondary' | Secondary action — green outline. | | 'white' | White background variant. | | 'dashed' | Dashed border. | | 'link' | Inline link appearance. | | 'text' | No border or background. | | 'text-black' | No border or background, black text. | | 'danger' | Destructive action — red outline. | | 'danger-light' | Destructive action — light red fill. | | 'transparent' | Transparent background. | | 'dropdown-button' | Dropdown trigger variant. |

Common Usage

Primary and Secondary

<Button type="primary">Submit</Button>
<Button type="secondary">Cancel</Button>

Danger

Use type="danger" or the danger prop for destructive actions.

<Button type="danger">Delete</Button>
<Button danger type="secondary">Remove</Button>

Sizes

<Button size="small">Small</Button>
<Button size="middle">Middle</Button>
<Button size="large">Large</Button>

With Icon

import { Delete } from '@fvc/icons';

<Button icon={<Delete />} type="primary">Delete item</Button>

Icon-only buttons use shape to control the outline:

<Button icon={<Delete />} shape="circle" />
<Button icon={<Delete />} shape="round" type="secondary" />

Loading State

loading shows a spinner and suppresses onClick until the operation completes. Use loadingText to replace the label during loading.

<Button loading type="primary">Saving…</Button>
<Button loading loadingText="Uploading…" icon={<Upload />} type="secondary" />

Disabled

<Button disabled type="primary">Unavailable</Button>

Full-Width

<Button block type="primary">Submit form</Button>

Transparent Background

<Button bg="transparent" type="primary">Overlay action</Button>

Props

| Prop | Type | Description | | --- | --- | --- | | type | ButtonType | Visual variant. Defaults to 'default'. | | shape | 'round' \| 'circle' | Button shape. | | bg | 'transparent' | Background override. | | size | 'small' \| 'middle' \| 'large' | Button size. Defaults to 'middle'. | | danger | boolean | Applies danger styling; equivalent to type="danger". | | block | boolean | Stretches the button to full container width. | | icon | ReactNode | Icon element, typically from @fvc/icons. | | loading | boolean | Shows a spinner and suppresses onClick. | | loadingText | ReactNode | Text displayed while loading is true. | | disabled | boolean | Disables the button and removes it from tab order. | | className | string | Additional CSS class names. | | testId | string | Maps to data-testid. | | children | ReactNode | Button label. |

Consumer Example

import { Button } from '@fvc/button';
import { Save, Trash } from '@fvc/icons';

export function RecordActions({ saving, onSave, onDelete }) {
  return (
    <div>
      <Button
        type="primary"
        icon={<Save />}
        loading={saving}
        loadingText="Saving…"
        onClick={onSave}
      >
        Save
      </Button>

      <Button
        type="danger"
        icon={<Trash />}
        onClick={onDelete}
      >
        Delete
      </Button>
    </div>
  );
}

Testing

Use testId when a stable test selector is needed.

<Button type="primary" testId="save-button">
  Save
</Button>

screen.getByTestId('save-button');

Customisation

@fvc/button exposes its visual tokens as CSS custom properties declared in src/styles/variables.scss. Override any of these in your own stylesheet — no fork, no file in the component, no re-bundle required.

/* consumer's own app stylesheet */
:root {
  --button-primary-bg-color: #1a7a4c;
  --button-primary-border-color: #1a7a4c;
  --button-primary-hover-bg-color: #15623d;
  --button-primary-hover-border-color: #15623d;
  --button-secondary-text-color: #1a7a4c;
  --button-secondary-border-color: #1a7a4c;
}

Available variables

| Variable | Default | Controls | | --- | --- | --- | | --button-default-text-color | var(--blue-200) | Text color of the default button | | --button-default-bg-color | var(--neutral-0) | Background color of the default button | | --button-default-border-color | var(--gray-300) | Border color of the default button | | --button-default-disabled-text-color | rgba(0,0,0,0.25) | Text color of the default button in the disabled state | | --button-default-disabled-bg-color | var(--neutral-0) | Background color of the default button in the disabled state | | --button-default-disabled-border-color | var(--gray-400) | Border color of the default button in the disabled state | | --button-primary-text-color | var(--neutral-0) | Text color of the primary button | | --button-primary-bg-color | var(--green-600) | Background color of the primary button | | --button-primary-border-color | var(--green-600) | Border color of the primary button | | --button-primary-hover-text-color | var(--neutral-0) | Text color of the primary button on hover | | --button-primary-hover-bg-color | var(--green-700) | Background color of the primary button on hover | | --button-primary-hover-border-color | var(--green-700) | Border color of the primary button on hover | | --button-primary-disabled-text-color | var(--gray-400) | Text color of the primary button in the disabled state | | --button-primary-disabled-bg-color | var(--green-800) | Background color of the primary button in the disabled state | | --button-primary-disabled-border-color | var(--green-800) | Border color of the primary button in the disabled state | | --button-primary-shadow | 0 4px 13px rgba(0,255,146,0.2) | Box shadow of the primary button | | --button-secondary-text-color | var(--green-600) | Text color of the secondary button | | --button-secondary-bg-color | transparent | Background color of the secondary button | | --button-secondary-border-color | var(--green-600) | Border color of the secondary button | | --button-secondary-hover-text-color | var(--green-600) | Text color of the secondary button on hover | | --button-secondary-hover-bg-color | var(--green-300-50) | Background color of the secondary button on hover | | --button-secondary-hover-border-color | var(--green-600) | Border color of the secondary button on hover | | --button-secondary-disabled-text-color | var(--green-300) | Text color of the secondary button in the disabled state | | --button-secondary-disabled-bg-color | var(--gray-100) | Background color of the secondary button in the disabled state | | --button-secondary-disabled-border-color | var(--green-300-30) | Border color of the secondary button in the disabled state | | --button-danger-text-color | var(--red-800) | Text color of the danger button | | --button-danger-bg-color | transparent | Background color of the danger button | | --button-danger-border-color | var(--red-800) | Border color of the danger button | | --button-danger-hover-text-color | var(--red-800) | Text color of the danger button on hover | | --button-danger-hover-bg-color | var(--red-300) | Background color of the danger button on hover | | --button-danger-hover-border-color | var(--red-800) | Border color of the danger button on hover | | --button-danger-disabled-text-color | var(--red-800) | Text color of the danger button in the disabled state | | --button-danger-disabled-bg-color | var(--red-400) | Background color of the danger button in the disabled state | | --button-danger-disabled-border-color | var(--red-800) | Border color of the danger button in the disabled state | | --button-dangerous-text-color | var(--red-800) | Text color of the dangerous button | | --button-dangerous-bg-color | var(--neutral-0) | Background color of the dangerous button | | --button-dangerous-border-color | var(--red-800) | Border color of the dangerous button | | --button-dangerous-hover-text-color | var(--red-300) | Text color of the dangerous button on hover | | --button-dangerous-hover-bg-color | var(--neutral-0) | Background color of the dangerous button on hover | | --button-dangerous-hover-border-color | var(--red-300) | Border color of the dangerous button on hover | | --button-dangerous-disabled-text-color | var(--red-400) | Text color of the dangerous button in the disabled state | | --button-dangerous-disabled-bg-color | var(--red-300-60) | Background color of the dangerous button in the disabled state | | --button-dangerous-disabled-border-color | var(--red-400) | Border color of the dangerous button in the disabled state | | --button-white-text-color | var(--neutral-0) | Text color of the white button | | --button-white-bg-color | transparent | Background color of the white button | | --button-white-border-color | var(--neutral-0) | Border color of the white button | | --button-white-hover-text-color | var(--gray-300) | Text color of the white button on hover | | --button-white-hover-bg-color | var(--neutral-0-20) | Background color of the white button on hover | | --button-white-hover-border-color | var(--gray-300) | Border color of the white button on hover | | --button-white-disabled-text-color | var(--neutral-0) | Text color of the white button in the disabled state | | --button-white-disabled-bg-color | var(--neutral-0-40) | Background color of the white button in the disabled state | | --button-white-disabled-border-color | var(--neutral-0) | Border color of the white button in the disabled state | | --button-dashed-text-color | var(--blue-200) | Text color of the dashed button | | --button-dashed-bg-color | var(--neutral-0) | Background color of the dashed button | | --button-dashed-border-color | var(--gray-300) | Border color of the dashed button | | --button-dashed-hover-text-color | #419471 | Text color of the dashed button on hover | | --button-dashed-hover-bg-color | var(--neutral-0) | Background color of the dashed button on hover | | --button-dashed-hover-border-color | #419471 | Border color of the dashed button on hover | | --button-link-text-color | var(--blue-400) | Text color of the link button | | --button-link-bg-color | transparent | Background color of the link button | | --button-link-border-color | transparent | Border color of the link button | | --button-link-hover-text-color | var(--blue-400) | Text color of the link button on hover | | --button-link-hover-bg-color | transparent | Background color of the link button on hover | | --button-link-hover-border-color | transparent | Border color of the link button on hover | | --button-link-disabled-bg-color | transparent | Background color of the link button in the disabled state | | --button-link-disabled-border-color | transparent | Border color of the link button in the disabled state | | --button-text-text-color | rgba(0,0,0,0.85) | Text color of the text button | | --button-text-bg-color | transparent | Background color of the text button | | --button-text-border-color | transparent | Border color of the text button | | --button-text-hover-text-color | var(--blue-400) | Text color of the text button on hover | | --button-text-hover-bg-color | rgba(0,0,0,0.02) | Background color of the text button on hover | | --button-text-hover-border-color | transparent | Border color of the text button on hover | | --button-text-disabled-bg-color | transparent | Background color of the text button in the disabled state | | --button-text-disabled-border-color | transparent | Border color of the text button in the disabled state | | --button-text-black-text-color | var(--black-1000) | Text color of the text-black variant | | --button-danger-light-text-color | var(--red-400) | Text color of the danger-light button | | --button-danger-light-bg-color | transparent | Background color of the danger-light button | | --button-danger-light-border-color | var(--red-400) | Border color of the danger-light button | | --button-danger-light-hover-text-color | var(--neutral-0) | Text color of the danger-light button on hover | | --button-danger-light-hover-bg-color | var(--red-400) | Background color of the danger-light button on hover | | --button-danger-light-hover-border-color | var(--red-400) | Border color of the danger-light button on hover | | --button-danger-light-disabled-text-color | var(--red-400) | Text color of the danger-light button in the disabled state | | --button-danger-light-disabled-bg-color | var(--red-300-60) | Background color of the danger-light button in the disabled state | | --button-danger-light-disabled-border-color | var(--red-400) | Border color of the danger-light button in the disabled state | | --button-transparent-text-color | var(--neutral-0) | Text color of the transparent button | | --button-transparent-bg-color | transparent | Background color of the transparent button | | --button-transparent-border-color | var(--gray-300) | Border color of the transparent button | | --button-transparent-hover-text-color | #419471 | Text color of the transparent button on hover | | --button-transparent-hover-bg-color | transparent | Background color of the transparent button on hover | | --button-transparent-hover-border-color | #419471 | Border color of the transparent button on hover | | --button-dropdown-text-color | var(--blue-gray-300) | Text color of the dropdown button | | --button-dropdown-border-color | var(--gray-400) | Border color of the dropdown button | | --button-dropdown-hover-border-color | #648bb3 | Border color of the dropdown button on hover | | --button-bg-transparent-hover-text-color | #419471 | Text color of the background-transparent button on hover | | --button-bg-transparent-hover-border-color | #419471 | Border color of the background-transparent button on hover | | --button-bg-transparent-active-text-color | #166147 | Text color of the background-transparent button in the active state | | --button-bg-transparent-active-border-color | #166147 | Border color of the background-transparent button in the active state | | --button-default-shadow | 0 2px rgba(0,0,0,0.016) | Default box shadow applied to most button variants | | --button-text-shadow | 0 -1px rgba(0,0,0,0.12) | Text shadow applied to the primary button | | --button-height-sm | 24px | Height of the small-size button | | --button-height-md | 32px | Height of the medium-size button | | --button-height-lg | 48px | Height of the large-size button | | --button-height-default | 40px | Height of the default-size button | | --button-height-dropdown | 34px | Height of the dropdown button | | --button-height-circle | 40px | Height of the circle-shape button | | --button-padding-sm | 0 7px | Padding of the small-size button | | --button-padding-md | 4px 16px | Padding of the medium-size button | | --button-padding-lg | 10.4px 15px | Padding of the large-size button | | --button-padding-default | 8px 16px | Padding of the default-size button | | --button-padding-round | 8px 20px | Padding of the round-shape button | | --button-padding-dropdown | 16px | Padding of the dropdown button | | --button-padding-circle | 0 | Padding of the circle-shape button | | --button-font-size-default | 14px | Font size for the default and small sizes | | --button-font-size-lg | 16px | Font size for the large size | | --button-font-weight-default | 700 | Font weight for most button variants | | --button-font-weight-text | 400 | Font weight for the text-black variant | | --button-line-height | 1.5715 | Line height applied to all button text | | --button-min-width-circle | 40px | Minimum width of the circle-shape button |

Development

bun run lint
bun run type-check
bun run test
bun run build