@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');

CSS Customisation

The component exposes CSS custom properties for theming. Override them in your global styles:

:root {
  --button-primary-text-color: #fff;
  --button-primary-bg-color: #1a7a4c;
  --button-primary-border-color: #1a7a4c;
  --button-primary-hover-bg-color: #15623d;

  --button-height-sm: 24px;
  --button-height-md: 32px;
  --button-height-lg: 48px;
  --button-height-default: 40px;

  --button-round-radius: 100px;
}

For the full variable list see src/variables.scss.

Development

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