Button

A simple, sizable button.

Features

  • Accepts size prop that works on all styles.

  • Can inverse theme with themeInverse.

  • Place an icon before or after.

Usage

import { Button } from 'tamagui'
export default () => (
<Button>
Lorem ipsum
</Button>
)

Sizing

Sizing buttons provides a unique challenge especially for a compiler, because you need to adjust many different properties - not just on the outer frame, but on the text wrapped inside. Tamagui supports adjusting the padding, border radius, font size and icons sizes all in one with the size prop.

import { Button } from 'tamagui'
export default () => (
<Button size="$6">
Lorem ipsum
</Button>
)

Given your theme defines a size 6, the button will adjust all of the properties appropriately. You can also pass a plain number to get an arbitrary size.

Icon Theming

You can pass icons as either elements or components. If passing components, Tamagui will automatically pass the size and color prop to them based on your theme.

Button props

Buttons extend Stack views inheriting all the Tamagui standard props, plus:

Prop

Type

Default

size
string | tokens.size

Set a size, number or one of the size token values.

theme
string

Apply a theme just to the button and it's children

themeInverse
boolean

Helpful for "flipping" any theme between dark and light (including flipping a sub themes defined as [subtheme]-[dark/light]

noTextWrap
boolean

If true, Button won't wrap content with a Text element.

icon
JSX.Element

Pass any React element, appears before the text.

iconAfter
JSX.Element

Pass any React element, appears after the text.

scaleIcon
number

Scale the icon more than usual by this number.

scaleSpace
number

Scale the spacing more than usual by this number.

spaceFlex
boolean

Makes all space elements have a flex.

color
SizableTextProps['color']

Passes "color" down to the inner text component

fontWeight
SizableTextProps['fontWeight']

Passes "fontWeight" down to the inner text component

letterSpacing
SizableTextProps['letterSpacing']

Passes "letterSpacing" down to the inner text component

textAlign
SizableTextProps['textAlign']

Passes "textAlign" down to the inner text component