---
title: "Change components through variants · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/styles-and-components/component-variants
updated: 2026-10-20
licence: "All rights reserved"
---

# Change components through variants

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Styles and components](https://agentwranglers.se/playbook/app-ui/styles-and-components)
- Rule: Change how a component looks only through its own options, such as `variant="danger"` or `size="small"`. Never override its classes from the outside.
- How: Give each component a short, closed list of variants, typed where the language allows it. When a screen needs a new look, add a variant to the component in its own change. Ban `!important` and selectors that reach into the library's class names from screen files.
- Check: Search screen styles for the library's class prefix and for `!important`. There are no matches.

Example:

```tsx
type ButtonProps = {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'small' | 'medium';
  children: React.ReactNode;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

export function Button({ variant = 'secondary', size = 'medium', ...rest }: ButtonProps) {
  return <button className={`ui-button ui-button--${variant} ui-button--${size}`} {...rest} />;
}
```

```python
import pathlib
import re
import sys

REACHES_INTO_LIBRARY = re.compile(r"\.ui-[\w-]+|!important")
problems = [
    str(path) for path in pathlib.Path("src/screens").rglob("*.css")
    if REACHES_INTO_LIBRARY.search(path.read_text())
]
print("\n".join(problems) or "screens use variants only")
sys.exit(1 if problems else 0)
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/styles-and-components/component-variants`.

- Previous: [Build each control once](https://agentwranglers.se/playbook/app-ui/styles-and-components/shared-components)
- Next: [Show every component state in a catalogue](https://agentwranglers.se/playbook/app-ui/styles-and-components/component-catalogue)
- [Styles and components](https://agentwranglers.se/playbook/app-ui/styles-and-components)