Variants

gluestack-style allows you to easily create different variations of a component with different styles.

Using variant props in a UI component library enhances flexibility and reusability of components.

Adding Variants

variant

function App() {
  const StyledButtonVariant = styled(Pressable, {
    px: "$3.5",
    py: "$2.5",
    rounded: "$md",
    variants: {
      variant: {
        solid: {
          bg: "$primary600",
        },
        subtle: {
          bg: "$primary300",
        },
      },
    },
  })
  const StyledButtonText = styled(
    Text,
    {
      color: "$textDark50",
      fontWeight: "400",
    },
    { ancestorStyle: ["_text"] }
  )
  return (
    <Provider config={config}>
      <StyledButtonVariant variant="solid">
        <StyledButtonText>Button</StyledButtonText>
      </StyledButtonVariant>
    </Provider>
  )
}

Multiple Variants

variant

size

function App() {
  const StyledButtonVariant = styled(
    Pressable,
    {
      p: "$3",
      rounded: "$md",
      variants: {
        variant: {
          solid: {
            bg: "$primary600",
          },
          subtle: {
            bg: "$primary200",
            _text: {
              color: "$textDark600",
            },
          },
        },
        size: {
          xs: {
            px: "$3",
            py: "$2",
          },
          sm: {
            px: "$3.5",
            py: "$2.5",
          },
        },
      },
    },
    {
      descendantStyle: ["_text"],
    }
  )
  const StyledButtonText = styled(
    Text,
    {
      color: "$textDark50",
      fontWeight: "400",
    },
    { ancestorStyle: ["_text"] }
  )
  return (
    <Provider config={config}>
      <StyledButtonVariant variant="solid" size="xs">
        <StyledButtonText>Button</StyledButtonText>
      </StyledButtonVariant>
    </Provider>
  )
}

Boolean Variants

variant

outlined

function App() {
  const StyledButtonVariant = styled(Pressable, {
    px: "$3.5",
    py: "$2.5",
    rounded: "$md",
    variants: {
      variant: {
        solid: {
          bg: "$primary600",
        },
        subtle: {
          bg: "$primary400",
        },
      },
      outlined: {
        true: {
          borderColor: "$primary800",
          borderWidth: "$1",
          bg: "transparent",
        },
      },
    },
  })
  const StyledButtonText = styled(
    Text,
    {
      color: "$textDark50",
      fontWeight: "400",
    },
    { ancestorStyle: ["_text"] }
  )
  return (
    <Provider config={config}>
      <StyledButtonVariant variant="solid" outlined={false}>
        <StyledButtonText>Button</StyledButtonText>
      </StyledButtonVariant>
    </Provider>
  )
}

Compound Variants

The compoundVariants feature enables setting styles for a variant based on a combination of other variants. This allows specifying different styles for a variant, depending on the values of other variants in use.

Note: compoundVariants is an array of objects that contain a value key and variants. The value key accepts the same style object as the sx style.

variant

size

function App() {
  const StyledButtonVariant = styled(
    Pressable,
    {
      p: "$3",
      rounded: "$md",
      variants: {
        variant: {
          solid: {
            bg: "$primary600",
          },
          subtle: {
            bg: "$primary200",
            _text: {
              color: "$textDark600",
            },
          },
        },
        size: {
          xs: {
            px: "$3",
            py: "$2",
          },
          sm: {
            px: "$3.5",
            py: "$2.5",
          },
        },
      },
      compoundVariants: [
        {
          variant: "solid",
          size: "sm",
          value: {
            borderWidth: "$2",
            ":hover": {
              bg: "$primary700",
            },
          },
        },
      ],
    },
    {
      descendantStyle: ["_text"],
    }
  )
  const StyledButtonText = styled(
    Text,
    {
      color: "$textDark50",
      fontWeight: "400",
    },
    { ancestorStyle: ["_text"] }
  )
  return (
    <Provider config={config}>
      <StyledButtonVariant variant="solid" size="sm" states={{ hover: true }}>
        <StyledButtonText>Button</StyledButtonText>
      </StyledButtonVariant>
    </Provider>
  )
}