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