mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
47 lines
1.0 KiB
TypeScript
47 lines
1.0 KiB
TypeScript
const App = `import {extendVariants, Button} from "@nextui-org/react";
|
|
|
|
const MyButton = extendVariants(Button, {
|
|
variants: {
|
|
color: {
|
|
olive: "text-[#000] bg-[#84cc16]",
|
|
orange: "bg-[#ff8c00] text-[#fff]",
|
|
violet: "bg-[#8b5cf6] text-[#fff]",
|
|
},
|
|
isDisabled: {
|
|
true: "bg-[#eaeaea] text-[#000] opacity-50 cursor-not-allowed",
|
|
},
|
|
size: {
|
|
xs: "px-unit-2 min-w-unit-12 h-unit-6 text-tiny gap-unit-1 rounded-small",
|
|
md: "px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-small",
|
|
xl: "px-unit-8 min-w-unit-28 h-unit-14 text-large gap-unit-4 rounded-medium",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
color: "olive",
|
|
size: "xl",
|
|
},
|
|
compoundVariants: [
|
|
{
|
|
isDisabled: true,
|
|
color: "olive",
|
|
class: "bg-[#84cc16]/80 opacity-100"
|
|
}
|
|
],
|
|
});
|
|
|
|
export default function App() {
|
|
return (
|
|
<MyButton color="olive" size="md">
|
|
Press Me
|
|
</MyButton>
|
|
);
|
|
}`;
|
|
|
|
const react = {
|
|
"/App.jsx": App,
|
|
};
|
|
|
|
export default {
|
|
...react,
|
|
};
|