With Icons and Label

function IconLabelButtonExample() {
  return (
    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
      <Button variant="primary">
        <Check />
      </Button>
      <Button variant="secondary">
        With Icon After
        <Check />
      </Button>
      <Button variant="gray">
        <Check />
        With Both Icons
        <Check />
      </Button>
      <Button variant="success">
        <Plus />
        Add Item
      </Button>
      <Button variant="warning">
        <User />
        Profile
      </Button>
    </div>
  );
}

Props

children

Type'[ReactElement, string]' | '[string, ReactElement]' | '[ReactElement, string, ReactElement]'

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-icon-label-button-padding-extra-large

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

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

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

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

--ax-public-button-gap-extra-large

--ax-public-button-gap-extra-small

--ax-public-button-gap-large

--ax-public-button-gap-medium

--ax-public-button-gap-small