NavButton

A navigation component styled as a button used specifically for route changes and link navigation.

Usage

With Icon

Disabled

Use the disabled class to disable the component.

Sizes

Use the nav-button-{size} class to control the component size.

Size values can include:smmdlgxl.

For more information on all available sizing utilities, visit Tailwind

Variants

Use the variant and palette classes to control the appereance of the component.

Variant values can include solidoutlinesurfacesubtleghostlinkplain.
Color palettes can include primaryneutral. For extra palettes such as warning error and more, refer to the Colors section.

Customizing

globals.css


:root {
  --ex-nav-button-cursor: pointer;
  --ex-nav-button-font-family: var(--font-sans);
  --ex-nav-button-font-weight: var(--font-weight-normal);
 
  --ex-nav-button-font-size-sm: var(--text-xs);
  --ex-nav-button-font-size-md: var(--text-sm);
  --ex-nav-button-font-size-lg: var(--text-base);
  --ex-nav-button-font-size-xl: var(--text-lg);
 
  --ex-nav-button-width-sm: calc(var(--spacing) * 14);
  --ex-nav-button-width-md: calc(var(--spacing) * 16);
  --ex-nav-button-width-lg: calc(var(--spacing) * 18);
  --ex-nav-button-width-xl: calc(var(--spacing) * 20);
 
  --ex-nav-button-gap-y-sm: calc(var(--spacing) * 1.75);
  --ex-nav-button-gap-y-md: calc(var(--spacing) * 2);
  --ex-nav-button-gap-y-lg: calc(var(--spacing) * 2.25);
  --ex-nav-button-gap-y-xl: calc(var(--spacing) * 2.5);
 
  --ex-nav-button-py-sm: calc(var(--spacing) * 2.5);
  --ex-nav-button-py-md: calc(var(--spacing) * 3);
  --ex-nav-button-py-lg: calc(var(--spacing) * 3.5);
  --ex-nav-button-py-xl: calc(var(--spacing) * 4);
 
  --ex-nav-button-radius-sm: var(--radius-sm);
  --ex-nav-button-radius-md: var(--radius-sm);
  --ex-nav-button-radius-lg: var(--radius-sm);
  --ex-nav-button-radius-xl: var(--radius-sm);
}

API

Element	Selector
`Button`	`.ex-nav-button`

Prop	Type	Default
`as`	`ElementType`	`button`
`asChild`	`boolean`	`false`