ToggleButton

pro

ToggleButton composes Button while swapping active and inactive content from one boolean state.

Get the code

Installation

Add this component with the NateUI CLI.

npx nateui@latest add ToggleButton

Examples

Icon Content

Get the code

Mixed Content

Get the code

Disabled

Get the code

Disabled Active Style

Get the code

API

ToggleButton accepts the content slots below and forwards the remaining Button props and native button props to Button.

PropDescriptionTypeDefault
activeSelects activeContent and applies Button's active visual state when true.booleanfalse
disabledActiveStyleKeeps the active content while preventing active from being passed to Button.booleanfalse
activeContentContent rendered while the toggle is active.ToggleButtonContent—
inactiveContentContent rendered while the toggle is inactive.ToggleButtonContent—
asElementRoot element or component rendered by Button.ElementType'button'
blockExpands the control to the full width of its container.booleanfalse
classNameAdditional classes or a state-aware class callback.ButtonClassName—
clickFeedbackEnables Button's press-down feedback.booleantrue
destructiveApplies Button's destructive intent palette.booleanfalse
disabledPrevents interaction and applies the disabled state.booleanfalse
iconAlignmentPlaces an icon before or after the active/inactive label.ButtonIconAlignment'start'
loadingShows Button's loading spinner and prevents repeat activation.booleanfalse
onClickClick handler forwarded to Button.ButtonClickHandler—
refRef forwarded to Button's underlying element.Ref<HTMLButtonElement>—
shapeBorder radius treatment.ButtonShape'round'
sizeButton control size.ControlSizeConfigProvider default
variantButton visual style.ButtonVariant'default'
...nativePropsNative props forwarded to the rendered element, such as type, aria-pressed, and aria-label.NativeButtonProps<E>—

Types

type ToggleButtonContent = {
  children?: ReactNode;
  icon?: string | ReactNode;
};
 
type ButtonIconAlignment = 'start' | 'end';
type ButtonShape = 'round' | 'circle' | 'none';
type ControlSize = 'sm' | 'md' | 'lg';
type ButtonVariant = 'solid' | 'subtle' | 'default' | 'ghost' | 'link';

ToggleButton does not infer an accessibility relationship from active; pass aria-pressed, aria-expanded, and related native props according to what the control operates.