Button

import { Button } from 'tamagui'

export default () => <Button>Lorem ipsum</Button>

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.

The Button component supports different visual styles through the variant prop. Currently, the primary available variant is "outlined".

import { Button, Stack } from 'tamagui'

export default () => (
  <Stack direction="row" space>
    <Button>Default</Button>
    <Button variant="outlined">Outlined</Button>
  </Stack>
)

When variant="outlined" is applied, the button typically has a transparent background with a visible border. The exact appearance (border color, hover/press states) is determined by your theme's definitions for an outlined button.

You can pass icons as either elements or components. If passing components, Tamagui will automatically theme them (passing size). The icon size is determined by the Button's size prop by default.

You can also explicitly set the icon size using the iconSize prop, which accepts a SizeTokens value (e.g., "$2"). The scaleIcon prop can be used to further adjust the size relative to the determined or explicitly set icon size.

When an icon is present, Tamagui automatically adds spacing between the icon and the button's text. This space is calculated as 40% of the icon's final computed size (after considering size, iconSize, and scaleIcon). This margin is applied to the right of an icon and to the left of an iconAfter.

import { Button, Star } from 'tamagui'

export default () => (
  <>
    <Button icon={Star} size="$5">
      Icon sized by Button
    </Button>
    <Button icon={Star} iconSize="$2" size="$5">
      Icon sized explicitly
    </Button>
  </>
)

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.

You can use Button.Apply to theme a group of Buttons using a shared context. This is useful for applying consistent sizing or variants to multiple buttons without passing props to each one individually.

import { Button, ButtonDemo, Stack } from 'tamagui'

export default () => (
  <Stack space>
    <Button.Apply size="$2" variant="outlined">
      <Button>Small Outlined 1</Button>
      <Button>Small Outlined 2</Button>
      <Button icon={ButtonDemo}>With Icon</Button>
    </Button.Apply>

    <Button.Apply size="$5">
      <Button>Large 1</Button>
      <Button theme="blue">Large Themed</Button>
    </Button.Apply>
  </Stack>
)

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.

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