Nav Button

NavButton renders its label from children and accepts optional prefixIcon and suffixIcon props. Omit children and provide prefixIcon for an icon-only button. Use variant to select square or round styling; icon-only buttons also support the no-background plain variant.

The isSelected prop renders the persistent Pressed state, including while the button is hovered. The mouse-down :active state uses a separate Active token.

Usage

import { House } from '@phosphor-icons/react';
import { NavButton } from '@workflowbuilder/ui';

function Example() {
  return (
    <NavButton isSelected prefixIcon={<House />}>
      Overview
    </NavButton>
  );
}

Props

Also accepts every standard <button> attribute (onChange, placeholder, aria-*, …); they are forwarded to the underlying element.

children

TypeReactNode

Only applies to the NavLabelButton variant (required there).

isSelected

Typeboolean

Renders the button in its selected state.

prefixIcon

TypeIconNode

Icon before the label.

size

TypeNavButtonSize

Default'm'

suffixIcon

TypeIconNode

Icon after the label. Only applies to the NavLabelButton variant.

tooltip

Typestring

Text of a tooltip shown when the button is hovered or focused.

tooltipType

TypeTooltipVariant

variant

TypeExclude<NavButtonVariant, 'plain'> | NavButtonVariant

Default'square'

Type varies by variant (NavLabelButton: Exclude<NavButtonVariant, 'plain'>, NavIconButton: NavButtonVariant).

CSS variables

Color

--wb-public-nav-button-background-color-default

--wb-public-nav-button-background-color-hover

--wb-public-nav-button-background-color-pressed

--wb-public-nav-button-background-color-active

--wb-public-nav-button-background-color-focus

--wb-public-nav-button-background-color-disabled

--wb-public-nav-button-color-default

--wb-public-nav-button-color-hover

--wb-public-nav-button-color-pressed

--wb-public-nav-button-color-active

--wb-public-nav-button-color-disabled

Size

--wb-public-nav-button-height-xl

--wb-public-nav-button-height-l

--wb-public-nav-button-height-m

--wb-public-nav-button-height-s

--wb-public-nav-button-height-xs

--wb-public-nav-button-height-xxs

--wb-public-nav-button-height-xxxs

--wb-public-nav-button-padding-xl

--wb-public-nav-button-padding-l

--wb-public-nav-button-padding-m

--wb-public-nav-button-padding-s

--wb-public-nav-button-padding-xs

--wb-public-nav-button-padding-xxs

--wb-public-nav-button-padding-xxxs

--wb-public-nav-button-label-padding-inline-xl

--wb-public-nav-button-label-padding-inline-l

--wb-public-nav-button-label-padding-inline-m

--wb-public-nav-button-label-padding-inline-s

--wb-public-nav-button-label-padding-inline-xs

--wb-public-nav-button-label-padding-inline-xxs

--wb-public-nav-button-label-padding-inline-xxxs

--wb-public-nav-button-gap-xl

--wb-public-nav-button-gap-l

--wb-public-nav-button-gap-m

--wb-public-nav-button-gap-s

--wb-public-nav-button-gap-xs

--wb-public-nav-button-gap-xxs

--wb-public-nav-button-gap-xxxs

--wb-public-nav-button-border-radius-xl

--wb-public-nav-button-border-radius-l

--wb-public-nav-button-border-radius-m

--wb-public-nav-button-border-radius-s

--wb-public-nav-button-border-radius-xs

--wb-public-nav-button-border-radius-xxs

--wb-public-nav-button-border-radius-xxxs

--wb-public-nav-button-border-radius-round

--wb-public-nav-button-icon-size-xl

--wb-public-nav-button-icon-size-l

--wb-public-nav-button-icon-size-m

--wb-public-nav-button-icon-size-s

--wb-public-nav-button-icon-size-xs

--wb-public-nav-button-icon-size-xxs

--wb-public-nav-button-icon-size-xxxs