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.

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.

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

Tamagui <Button /> is a React functional component that renders multiple styled() components, not a single Tamagui styled() element itself. This means you can't wrap it with styled(Button) to change variants.

We'd like to support this feature eventually , but until then we've exported a useButton hook, alongside ButtonFrame, ButtonText, and buttonStaticConfig that make it simple to create your own Button.

Your custom Button.tsx in your design system would look something like this:

import { forwardRef } from 'React'
import { styled, themeable, ButtonFrame, ButtonText, useButton, buttonStaticConfig } from 'tamagui'

const CustomButtonFrame = styled(ButtonFrame, {
  // ... customize your button frame base styles

  variants: {
    // ... customize your button frame variants
  } as const
})

const ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(props, ref) {
  const { props: buttonProps } = useButton(
    props,
    // optionally customize the inner Text
    { Text: ButtonText }
  )
  return <CustomButtonFrame {...buttonProps} ref={ref} />
})

// Wrapping in extractable() lets the compiler run build-time optimizations on your custom Button
// Wrapping in themable means `<Button theme="" />` properly updates theme before useButton needs it
export const Button = ButtonFrame.extractable(themeable(ButtonComponent), buttonStaticConfig)