With Icons and Label

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

Props

children

required

Type| [IconNode, string] | [string, IconNode] | [IconNode, string, IconNode]

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

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-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-xx-small

--ax-public-button-gap-xxx-small

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

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