Using Tamagui themes, is there a way to set global button styles?

I have a react-native (expo) app using Tamagui's design system and want to the be able to set the button styles within my theme.

I currently have a theme like below where I can set certain properties, i.e. backgroundHover but I can't find a full list of these props in tamagui's docs.

Things like backgroundPress work for setting the global background press style which I can use for styling my button but I guess this will also apply to other ponents that have an onPress?

I looked at setting background but this sets all ponent backgrounds to that color by default.

import tokens from './tokens';
import { tokens as defaultTokens } from '@tamagui/themes';
import { createTheme } from 'tamagui';

const myTheme = createTheme({
  background: tokens.color.white,
  color: tokens.color.black,
  backgroundHover: tokens.color.primary,
  backgroundPress: defaultTokens.color.pink6Light,
  backgroundFocus: tokens.color.white,
  borderColor: tokens.color.lavender_pink,
  borderColorHover: tokens.color.white,
  colorHover: tokens.color.white,
  colorPress: defaultTokens.color.pink6Light,
  colorFocus: tokens.color.white,
  shadowColor: defaultTokens.color.gray12Light,
  shadowColorHover: tokens.color.white,
})
export default myTheme;

Is there a way to set global styles for only buttons within a theme or do I just need to create a new button ponent and use the styled() function and then import that button whenever I need it?

Using Tamagui themes, is there a way to set global button styles?

I have a react-native (expo) app using Tamagui's design system and want to the be able to set the button styles within my theme.

I currently have a theme like below where I can set certain properties, i.e. backgroundHover but I can't find a full list of these props in tamagui's docs.

Things like backgroundPress work for setting the global background press style which I can use for styling my button but I guess this will also apply to other ponents that have an onPress?

I looked at setting background but this sets all ponent backgrounds to that color by default.

import tokens from './tokens';
import { tokens as defaultTokens } from '@tamagui/themes';
import { createTheme } from 'tamagui';

const myTheme = createTheme({
  background: tokens.color.white,
  color: tokens.color.black,
  backgroundHover: tokens.color.primary,
  backgroundPress: defaultTokens.color.pink6Light,
  backgroundFocus: tokens.color.white,
  borderColor: tokens.color.lavender_pink,
  borderColorHover: tokens.color.white,
  colorHover: tokens.color.white,
  colorPress: defaultTokens.color.pink6Light,
  colorFocus: tokens.color.white,
  shadowColor: defaultTokens.color.gray12Light,
  shadowColorHover: tokens.color.white,
})
export default myTheme;

Is there a way to set global styles for only buttons within a theme or do I just need to create a new button ponent and use the styled() function and then import that button whenever I need it?

• javascript
• reactjs
• react-native
• expo
• styled-ponents

2 Answers 2

As I got from your question, you need to set a default style for tamagui Button, you can set the the button styles like that:

// tamagui.config.ts
const config = createTamagui({
  themes: {
    ...tamaguiThemes,
    light_Button: {
      background: "#232323",
      backgroundFocus: "#424242",
      backgroundHover: "#282828",
      backgroundPress: "#323232",
      backgroundStrong: "#191919",
      backgroundTransparent: "#151515",
      borderColor: "red",
      borderColorFocus: "red",
      borderColorHover: "transparent",
      borderColorPress: "red",
      color: "#fff",
      colorFocus: "#a5a5a5",
      colorHover: "#a5a5a5",
      colorPress: "#fff",
      colorTransparent: "#a5a5a5",
      placeholderColor: "#424242",
    },
  },
});

Given that your theme is light

There is very little online about tamagui modifying the default theme. You can get the code of a specific ponent by printing out configBase.themes.

import {config as configBase} from '@tamagui/config/v3'
import {createTamagui} from 'tamagui'


export const config = createTamagui({
    ...configBase,
    themes: {
        ...configBase.themes,
        light_Button: {
            background: "#000",
            backgroundFocus: "#424242",
            backgroundHover: "#282828",
            backgroundPress: "#323232",
            backgroundStrong: "#191919",
            backgroundTransparent: "#151515",
            borderColor: "red",
            borderColorFocus: "red",
            borderColorHover: "transparent",
            borderColorPress: "red",
            color: "#fff",
            colorFocus: "#a5a5a5",
            colorHover: "#a5a5a5",
            colorPress: "#fff",
            colorTransparent: "#a5a5a5",
            placeholderColor: "#424242",
        },
    }
})

export default config

export type Conf = typeof config

declare module 'tamagui' {
    interface TamaguiCustomConfig extends Conf {
    }
}