With Icon

function NavIconButtonExample() {
  return (
    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
      <NavButton>
        <Check />
      </NavButton>
      <NavButton shape="circle">
        <Plus />
      </NavButton>
      <NavButton transparent={true}>
        <User />
      </NavButton>
    </div>
  );
}

Props

children

required

TypeReactReactElement

isSelected

Typeboolean

shape

Type'' | 'circle'

Default''

size

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

Default'medium'

tooltip

Typestring

tooltipType

Type'default' | 'blue'

transparent

Typeboolean

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

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

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

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

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

--ax-public-icon-size-xx-small

--ax-public-icon-size-xxx-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

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

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