Inputs@knitui/components

Button

Button is composed from Box + Text. Colors reference the active theme palette ramp, so the theme prop recolors it with no per-component logic. variant chooses how the ramp applies and size sets the metrics.

WebiOSAndroid4 style slots4 own props18 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

variantVisual variant — how the theme color ramp is applied.

shadowElevation — drop shadow from the shared ladder (inherited from Box).

sizeControls height, horizontal padding, radius and font size.

justifyHorizontal alignment of inner content (label + sections).

fullWidth

false

disabled

false

loading

false

themeActive theme accent — recolors the button via the palette ramp.

children

Playground

<Button
  variant="filled"
  size="md"
  fullWidth={false}
  disabled={false}
  loading={false}
>
  Button
</Button>

Usage

Button takes its label as children. Everything else — colour, size, elevation, gradient, loading state — is a prop off one of the kit's shared systems, so the same vocabulary works on ActionIcon, Chip, Badge and the rest.

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

<Button variant="light" size="lg" onPress={submit}>
  Continue
</Button>;

Use leftSection / rightSection for icons or adornments; string children become a themed Button.Text, while element children are placed as-is.

When to use something else

An icon with no label → ActionIcon
A link that looks like text → Anchor
A pressable surface with no chrome at all → UnstyledButton
A selectable, toggle-shaped control → Chip

Examples

Variants

Every visual variant side by side, at the default size.

Loading example…

VariantsSource Storybook

Sizes

The seven token sizes, from xxs to xxl.

Loading example…

SizesSource Storybook

Shadows

Elevation via the shared shadow ladder. shadow isn't Button-specific — it's inherited from Box, so every component accepts it; no shadow unless set.

Loading example…

ShadowsSource Storybook

Loading

Loading state — the label is replaced by a spinner; the button is disabled.

Loading example…

LoadingSource Storybook

Disabled

Disabled state — reduced opacity and pointer events off.

Loading example…

DisabledSource Storybook

Full Width

Stretches to the full width of its container.

Loading example…

Full WidthSource Storybook

With Sections

Left and right sections hold icons, badges or any adornment.

Loading example…

With SectionsSource Storybook

Themed

The palette ramp follows the active theme — same component, different accent.

Loading example…

ThemedSource Storybook

Group

Button.Group attaches buttons flush together; orientation flips the axis.

Loading example…

GroupSource Storybook

Group Section

Button.GroupSection is a non-interactive segment inside a group.

Loading example…

Group SectionSource Storybook

Matrix

Full variant × size matrix for visual regression.

Loading example…

MatrixSource Storybook

Gradient

Gradient fills — the themed default ramp, a two-color shorthand, a token gradient, and a multi-step stops gradient.

Loading example…

GradientSource Storybook

Gradient Presets

A handful of curated gradient presets — both two-color and multi-step.

Loading example…

Gradient PresetsSource Storybook

Gradient Themed

With no gradient prop, variant="gradient" falls back to the active theme's ramp.

Loading example…

Gradient ThemedSource Storybook

Gradient Sizes

A gradient fill across the seven token sizes.

Loading example…

Gradient SizesSource Storybook

Gradient Angles

The same two-color gradient swept through a range of angles.

Loading example…

Gradient AnglesSource Storybook

Styles

Per-slot styles targets individual parts — here the label and right section.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`disabled` system	`boolean \| undefined`	`false`
`fullWidth` system	`boolean \| undefined`	`false`
`gradient` system	`GradientValue \| undefined`	—	Gradient fill for variant='gradient' — { from, to, deg } or { stops, deg }.
`leftSection`	`ReactNode`	—
`loaderProps`	`Partial<LoaderProps> \| undefined`	—
`loading`	`boolean \| undefined`	`false`
`radius` system	`string \| number \| undefined`	—
`rightSection`	`ReactNode`	—
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` unset · xs · sm · md · lg · xl	—	Elevation — drop shadow from the shared ladder (inherited from Box).
`size` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` xxs · xs · sm · md · lg · xl · xxl	`md`	Controls height, horizontal padding, radius and font size.
`styles` system	`SlotStyles<ButtonStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined` unset · blue · red · green · yellow · pink · gray	—	Active theme accent — recolors the button via the palette ramp.
`variant` system	`"light" \| "outline" \| "white" \| "transparent" \| "default" \| "filled" \| "subtle" \| "gradient" \| undefined` filled · light · outline · subtle · default · white · transparent · gradient	`filled`	Visual variant — how the theme color ramp is applied.

Style slots

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

Slot	Usage
`label`	`styles={{ label: { … } }}`
`left`	`styles={{ left: { … } }}`
`loader`	`styles={{ loader: { … } }}`
`right`	`styles={{ right: { … } }}`

Accessibility & DOM props (2)

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

Plus 499 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.

Accessibility

On the web, Button renders a real <button> (via the kit's webButton() helper), so it is focusable, activates on Enter and Space, and is announced as a button with no extra props.
disabled sets the native disabled state and blocks press handling — it does not merely dim the control.
loading keeps the control mounted and blocks interaction while a Loader replaces the icon slot, so focus is never lost mid-request.
Icon-only usage must carry an accessible name; prefer ActionIcon, which is built for it.