Skip to main content

With Label

function NavButtonExample() {
  return (
    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
      <NavButton>Button</NavButton>
      <NavButton isSelected>Button</NavButton>
      <NavButton disabled>Button</NavButton>
    </div>
  );
}

Props

children

required
Typestring

isSelected

Typeboolean

size

Type'xxx-small' | 'xx-small' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large'
Default'medium'

tooltip

Typestring

tooltipType

Type'default' | 'blue'

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-nav-background-color
--ax-public-button-nav-color
--ax-public-button-nav-color-active
--ax-public-button-nav-color-disabled

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
--ax-public-button-border-radius-xx-small
--ax-public-button-border-radius-xxx-small

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
--ax-public-label-button-padding-xx-small
--ax-public-label-button-padding-xxx-small