
This can be a handy way to support stylistic variations in button or typography components.

## Example

Given the following `theme.js`:

```js title=theme.js
export default {
  colors: {
    primary: "#0cf",
    secondary: "#c0f",
    text: "#111",
  },
  fontSizes: {
    xs: "0.75rem",
    sm: "0.875rem",
    md: "1rem",
  },
  space: {
    0: "0",
    1: "0.25rem",
    2: "0.5rem",
    3: "0.75rem",
  },

  // highlight-start
  text: {
    caps: {
      textDecoration: "uppercase",
    },
  },

  button: {
    color: "text",
    fontSize: "md",

    primary: {
      bg: "primary",
    },

    secondary: {
      bg: "secondary",
    },

    lg: {
      fontSize: 3,
    },

    sm: {
      fontSize: 1,
    },
  },
  // highlight-end
}
```

Use the `variant` props to apply variant styles to your components.

```jsx
<button variant="button.primary" />
<a variant="button.secondary" />
```

## Variant Composition

Variant styles can be composed (from left to right).

<Callout>

Reflexjs will automatically compose your styles using nested composition. Styles are merged in the order that you use them.

</Callout>

```jsx
<button variant="button.primary.lg" />
<button variant="button.sm" />
```

## Multiple Variants

You can also pass multiple variants to the `variant` prop for more advanced composition.

```jsx
<button variant="button.primary.sm text.caps" />
```

## Callable Variants

Variants can be callable/functions. This is useful for creating dynamic variants based on the component styles.

Here's how you could create an `outline` button with variants.

```jsx
const theme = {
  button: {
    primary: {
      bg: "primary",
    },
    secondary: {
      bg: "secondary",
    },
    outline: (theme, styles) => {
      color: styles?.bg // highlight-line
      borderColor: styles?.bg // highlight-line
    },
  },
}

// style?.bg returns "primary" with button.primary.outline.
<button variant="button.primary.outline" />

// style?.bg returns "secondary" with button.secondary.outline.
<button variant="button.secondary.outline" />
```

## Overriding variant styles

To override variant syles, simply pass in style props.

```jsx
<button variant="button.primary" bg="tomato" />
```


Pseudo Selectors

Responsive Styles

Variants

变体

示例

变体组合

多个变体

可调用变体

覆盖变体样式