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.
You can use the source of Button itself to see in more detail what variants you can override, and how we use this pattern internally to create our Button component.
Customization (Advanced)
Button only supports a limited subset of text props directly, and doesn't accept hoverStyle
text props. If you need more control, you can do a simple customization using some exported helpers.
Please note that this pattern is a bit antithetical to the multiple-components APIs that Tamagui generally prefers. In a future release we hope to fix this, but that change should be easy to migrate to.
import { forwardRef } from 'react'import { styled, themeable, ButtonFrame, ButtonText, ButtonProps as TamaguiButtonProps, GetProps, useButton } from 'tamagui'const CustomButtonFrame = styled(ButtonFrame, {// ...})const CustomButtonText = styled(ButtonText, {// ...})type CustomButtonProps = GetProps<typeof CustomButtonFrame>;type CustomButtonTextProps = GetProps<typeof CustomButtonText>;export type ButtonProps = TamaguiButtonProps &CustomButtonProps &CustomButtonTextProps;export const Button = themeable(forwardRef<TamaguiElement, ButtonProps>((propsIn, ref) => {const { props } = useButton(propsIn, { Text: CustomButtonText })return <CustomButtonFrame {...props} ref={ref} />}))
Button props
Buttons extend Stack views inheriting all the Tamagui standard props, plus:
Props
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
circular
boolean
Forces a circular button.