With Label

function LabelButtonExample() {
  return (
    <div style={{ display: 'flex', gap: '8px', flexDirection: 'column' }}>
      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
        <Button variant="primary">Primary Button</Button>
        <Button variant="secondary">Secondary Button</Button>
        <Button variant="gray">Gray Button</Button>
        <Button variant="error">Error Button</Button>
      </div>
      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
        <Button variant="warning">Warning Button</Button>
        <Button variant="success">Success Button</Button>
        <Button variant="ghost-destructive">Ghost Destructive</Button>
        <Button variant="primary" isLoading>
          Loading
        </Button>
      </div>
    </div>
  );
}

Props

children

required

Typestring

isLoading

Typeboolean

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

Spacing

--ax-public-label-button-padding-extra-large

--ax-public-label-button-padding-extra-small

--ax-public-label-button-padding-large

--ax-public-label-button-padding-medium

--ax-public-label-button-padding-small

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