With Icon

function IconButtonExample() {
  return (
    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
      <Button variant="primary">
        <Check />
      </Button>
      <Button variant="secondary">
        <Plus />
      </Button>
      <Button variant="gray">
        <User />
      </Button>
    </div>
  );
}

Props

children

required

TypeReactReactElement

shape

Type'' | 'circle'

Default''

size

Type'extra-small' | 'small' | 'medium' | 'large' | 'extra-large'

Default'medium'

tooltip

Typestring

tooltipType

Type'default' | 'blue'

variant

Type'primary' | 'secondary' | 'gray' | 'error' | 'warning' | 'success' | 'ghost-destructive'

Default'primary'

CSS Variables

Color

--ax-public-button-background-color-disabled

--ax-public-button-color

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

--ax-public-button-inner-border-color

--ax-public-button-error-background

--ax-public-button-error-background-active

--ax-public-button-error-background-focus

--ax-public-button-error-background-hover

--ax-public-button-ghost-destructive-background-color

--ax-public-button-ghost-destructive-background-color-active

--ax-public-button-ghost-destructive-background-color-disabled

--ax-public-button-ghost-destructive-background-color-focus

--ax-public-button-ghost-destructive-background-color-hover

--ax-public-button-ghost-destructive-border-color

--ax-public-button-ghost-destructive-color

--ax-public-button-ghost-destructive-color-disabled

--ax-public-button-gray-background

--ax-public-button-gray-background-active

--ax-public-button-gray-background-focus

--ax-public-button-gray-background-hover

--ax-public-button-primary-background

--ax-public-button-primary-background-active

--ax-public-button-primary-background-focus

--ax-public-button-primary-background-hover

--ax-public-button-secondary-border-color

--ax-public-button-secondary-border-color-active

--ax-public-button-secondary-border-color-disabled

--ax-public-button-secondary-border-color-focus

--ax-public-button-secondary-border-color-hover

--ax-public-button-secondary-color

--ax-public-button-secondary-color-active

--ax-public-button-secondary-color-disabled

--ax-public-button-success-background

--ax-public-button-success-background-active

--ax-public-button-success-background-focus

--ax-public-button-success-background-hover

--ax-public-button-warning-background

--ax-public-button-warning-background-active

--ax-public-button-warning-background-focus

--ax-public-button-warning-background-hover

Radius

--ax-public-button-border-radius-circle

--ax-public-button-border-radius-extra-large

--ax-public-button-border-radius-extra-small

--ax-public-button-border-radius-large

--ax-public-button-border-radius-medium

--ax-public-button-border-radius-small

Size

--ax-public-button-border-size

--ax-public-icon-size-extra-large

--ax-public-icon-size-extra-small

--ax-public-icon-size-large

--ax-public-icon-size-medium

--ax-public-icon-size-small

Spacing

--ax-public-button-icon-padding-extra-large

--ax-public-button-icon-padding-extra-small

--ax-public-button-icon-padding-large

--ax-public-button-icon-padding-medium

--ax-public-button-icon-padding-small