Button

Button renders its label from children and accepts optional prefixIcon and suffixIcon props. Use the square or round shape for icon-only buttons.

Usage

import { Button } from '@workflowbuilder/ui';

function Example() {
  return <Button variant="primary">Submit</Button>;
}

Props

Also accepts every standard <button> attribute (onChange, placeholder, aria-*, …); they are forwarded to the underlying element.

aria-label

Typestring

Only applies to the IconButton variant (required there).

children

TypeReactNode

Only applies to the LabelButton variant (required there).

isLoading

Typeboolean

Defaultfalse

prefixIcon

TypeReactElement

shape

Type'default' | Exclude<ButtonShape, 'default'>

Default'default'

Type varies by variant (LabelButton: 'default', IconButton: Exclude<ButtonShape, 'default'>).

size

TypeButtonSize

Default'm'

suffixIcon

TypeReactElement

Only applies to the LabelButton variant.

tooltip

Typestring

tooltipType

TypeTooltipVariant

Default'default'

variant

TypeButtonVariant

Default'primary'

CSS variables

Color

--wb-public-button-background-color-disabled

--wb-public-button-focus-visible-box-shadow-color

--wb-public-button-inner-border-color

--wb-public-button-color

--wb-public-button-loader-dot-color

--wb-public-button-primary-background

--wb-public-button-primary-background-hover

--wb-public-button-primary-background-active

--wb-public-button-primary-background-focus

--wb-public-button-primary-background-disabled

--wb-public-button-primary-color

--wb-public-button-primary-color-disabled

--wb-public-button-secondary-background

--wb-public-button-secondary-background-hover

--wb-public-button-secondary-background-active

--wb-public-button-secondary-background-focus

--wb-public-button-secondary-background-disabled

--wb-public-button-secondary-color

--wb-public-button-secondary-color-disabled

--wb-public-button-critical-background

--wb-public-button-critical-background-hover

--wb-public-button-critical-background-active

--wb-public-button-critical-background-focus

--wb-public-button-critical-background-disabled

--wb-public-button-critical-color

--wb-public-button-critical-color-disabled

--wb-public-button-success-background

--wb-public-button-success-background-hover

--wb-public-button-success-background-active

--wb-public-button-success-background-focus

--wb-public-button-success-background-disabled

--wb-public-button-success-color

--wb-public-button-success-color-disabled

--wb-public-button-ghost-primary-background-color

--wb-public-button-ghost-primary-background-color-hover

--wb-public-button-ghost-primary-background-color-active

--wb-public-button-ghost-primary-background-color-focus

--wb-public-button-ghost-primary-background-color-disabled

--wb-public-button-ghost-primary-border-color

--wb-public-button-ghost-primary-color

--wb-public-button-ghost-primary-color-disabled

--wb-public-button-ghost-secondary-background-color

--wb-public-button-ghost-secondary-background-color-hover

--wb-public-button-ghost-secondary-background-color-active

--wb-public-button-ghost-secondary-background-color-focus

--wb-public-button-ghost-secondary-background-color-disabled

--wb-public-button-ghost-secondary-border-color

--wb-public-button-ghost-secondary-border-color-hover

--wb-public-button-ghost-secondary-border-color-active

--wb-public-button-ghost-secondary-border-color-focus

--wb-public-button-ghost-secondary-border-color-disabled

--wb-public-button-ghost-secondary-color

--wb-public-button-ghost-secondary-color-disabled

--wb-public-button-ghost-critical-background-color

--wb-public-button-ghost-critical-background-color-hover

--wb-public-button-ghost-critical-background-color-active

--wb-public-button-ghost-critical-background-color-focus

--wb-public-button-ghost-critical-background-color-disabled

--wb-public-button-ghost-critical-border-color

--wb-public-button-ghost-critical-color

--wb-public-button-ghost-critical-color-disabled

--wb-public-button-ghost-success-background-color

--wb-public-button-ghost-success-background-color-hover

--wb-public-button-ghost-success-background-color-active

--wb-public-button-ghost-success-background-color-focus

--wb-public-button-ghost-success-background-color-disabled

--wb-public-button-ghost-success-border-color

--wb-public-button-ghost-success-color

--wb-public-button-ghost-success-color-disabled

Size

--wb-public-button-loader-dot-size

--wb-public-button-loader-dot-border-radius

--wb-public-button-loader-animation-duration

--wb-public-button-border-radius-xl

--wb-public-button-border-radius-l

--wb-public-button-border-radius-m

--wb-public-button-border-radius-s

--wb-public-button-border-radius-xs

--wb-public-button-border-radius-round

--wb-public-button-gap-xl

--wb-public-button-gap-l

--wb-public-button-gap-m

--wb-public-button-gap-s

--wb-public-button-gap-xs

--wb-public-button-height-xl

--wb-public-button-height-l

--wb-public-button-height-m

--wb-public-button-height-s

--wb-public-button-height-xs

--wb-public-button-icon-padding-xl

--wb-public-button-icon-padding-l

--wb-public-button-icon-padding-m

--wb-public-button-icon-padding-s

--wb-public-button-icon-padding-xs

--wb-public-icon-size-xl

--wb-public-icon-size-l

--wb-public-icon-size-m

--wb-public-icon-size-s

--wb-public-icon-size-xs

--wb-public-button-padding-xl

--wb-public-button-padding-l

--wb-public-button-padding-m

--wb-public-button-padding-s

--wb-public-button-padding-xs

--wb-public-button-border-size