Skip to main content

Variants

The "variants" pattern allows you to conditionally apply one of several predefined styles based on a value. This is especially useful for theming or dynamic component behavior.

Example: Button Variants

Here’s how you can create a button component with different visual styles based on a variant prop:

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
primary: {
backgroundColor: {
default: 'blue',
':hover': 'darkblue',
},
color: 'white',
},
secondary: {
backgroundColor: {
default: 'gray',
':hover': 'darkgray',
},
color: 'white',
},
});

function Button({ variant = 'primary', ...props }) {
return <button {...props} {...stylex.props(styles[variant], props.style)} />;
}

// Usage
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>