PlumeriaVariant
Learn more about Variant syntax
Using variants, you can switch between predefined style keys for a component via properties.
In the passing "white" | "pink" | "green" to the color property, the corresponding styles will be applied to the Button.
Example
The type of the property must be returned by the create method using keyof typeof.
eg: color: keyof typeof styles.
import { css } from '@plumeria/core';
const styles = css.create({
white: {
color: 'white',
},
pink: {
color: 'pink',
},
green: {
color: 'green',
},
});
export const Button = ({ color }: { color: keyof typeof styles }) => {
return <button className={css.props(styles[color])}>Button</button>;
};
<Button color="white" />;
<Button color="pink" />;
<Button color="green" />;