Navigation@knitui/components

Burger

Burger renders a three-line hamburger icon that animates to an × when opened is true. It extends UnstyledButton so it has a role="button", pointer cursor, focusVisible outline, and a disabled variant out of the box. Use the token-first size scale to set the icon dimensions and pass aria-label for accessibility.

WebiOSAndroid4 style slots7 own props10 examples

Stories Source Tests Open in Storybook

import { Burger } from "@knitui/components";

Playground

Loading playground…

sizeControls the width and height of the burger icon.

openedWhen true the burger morphs into an × (close) icon.

false

disabledDisables interaction and dims the button.

false

transitionDurationMorph animation duration in milliseconds.

transitionTimingFunctionCSS timing function for the morph animation.

lineSizeExplicit line thickness in px — derived from size by default.

Playground

<Burger
  aria-label="Toggle navigation"
  opened={false}
  size="md"
  disabled={false}
  transitionDuration={300}
  transitionTimingFunction="ease"
/>

Examples

Sizes

Full token size scale rendered side by side for quick comparison.

Loading example…

SizesSource Storybook

Opened

The opened (×) state — the full token size scale to show the morph result.

Loading example…

OpenedSource Storybook

Shadows

Elevation via the shared shadow ladder — inherited from Box, so every component accepts it; no shadow unless set.

Loading example…

ShadowsSource Storybook

Controlled

Controlled toggle — click the burger to open and close it.

Loading example…

ControlledSource Storybook

Disabled

Disabled state — interaction is suppressed and the button appears dimmed.

Loading example…

DisabledSource Storybook

With Label

With a child label rendered alongside the icon.

Loading example…

With LabelSource Storybook

Theme Accent

Theme accent — line color follows the active theme tokens.

Loading example…

Theme AccentSource Storybook

Slow Transition

Slow transition — makes the morph animation visible for demonstration.

Loading example…

Slow TransitionSource Storybook

Styles

Per-slot styles targets individual parts — here the line bars and text label.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`aria-label`	`string \| undefined`	`Toggle navigation`	Accessible label for the button.
`children`	`ReactNode`	—	Content rendered after the burger icon.
`color`	`OpaqueColorValue \| GetThemeValueForKey<"backgroundColor"> \| undefined`	`'$color12'`	Color of the burger lines. Theme color token or any CSS color.
`disabled` system	`boolean \| undefined`	`false`	Disables interaction and dims the button.
`lineSize`	`string \| number \| undefined`	—	Explicit line thickness in px — derived from size by default.
`opened`	`boolean \| undefined`	`false`	When true the burger morphs into an × (close) icon.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` xxs · xs · sm · md · lg · xl · xxl	`'md'`	Controls the width and height of the burger icon.
`styles` system	`SlotStyles<BurgerStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`transitionDuration`	`number \| undefined`	`300`	Morph animation duration in milliseconds.
`transitionTimingFunction`	`string \| undefined` ease · linear · ease-in · ease-out · cubic-bezier(0.34,1.56,0.64,1)	`'ease'`	CSS timing function for the morph animation.

Style slots

Every part of Burger can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`icon`	`styles={{ icon: { … } }}`
`line`	`styles={{ line: { … } }}`
`root`	`styles={{ root: { … } }}`
`text`	`styles={{ text: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 496 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.