GitHub
wwwwwwwwwwwwwwwwwww

Button

A sizeable, themeable button.

yarnnpmbunpnpm
import { Activity, Airplay } from '@tamagui/lucide-icons'

import { Button, XGroup, XStack, YStack } from 'tamagui'



export function ButtonDemo(props) {

  return (

    <YStack padding="$3" gap="$3" {...props}>

      <Button>Plain</Button>

      <Button alignSelf="center" icon={Airplay} size="$6">

        Large

      </Button>

      <XStack gap="$2" justifyContent="center">

        <Button size="$3" theme="active">

          Active

        </Button>

        <Button size="$3" variant="outlined">

          Outlined

        </Button>

      </XStack>

      <XStack gap="$2">

        <Button themeInverse size="$3">

          Inverse

        </Button>

        <Button iconAfter={Activity} size="$3">

          iconAfter

        </Button>

      </XStack>

      <XGroup>

        <XGroup.Item>

          <Button width="50%" size="$2" disabled opacity={0.5}>

            disabled

          </Button>

        </XGroup.Item>



        <XGroup.Item>

          <Button width="50%" size="$2" chromeless>

            chromeless

          </Button>

        </XGroup.Item>

      </XGroup>

    </YStack>

  )

}

Features

  • Accepts size prop that works on all styles.

  • Can inverse theme with themeInverse.

  • Place an icon before or after.

Usage

When using the simple Button API, it's as simple as this:

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.

Creating your own Button

Tamagui now has all the features necessary to make creating a custom Button easy enough that you may want to roll your own button. Learn how to do it with our dedicated guide, How to Build a Button.

The previous useButton API is deprecated and will be removed in a future version. It's brittle and is easily replaced with the new compound component APIs as described in the guide.

API Reference

Button

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.

  • unstyled

    boolean

    Removes all default Tamagui styles.

    • Previous

    Text

    Next

    Checkbox

    Edit this page on GitHub.