Button

import { Button } from "anolis-ui";

interface ButtonProps extends ComplementProps, SystemProps {

}

type ButtonVariant = "solid" | "clear" | "outline" | "link";
type ButtonSize = "xs" | "sm" | "md" | "lg";

Basic

Button has 4 default variants and sizes. By default, button is in solid variant and md size.

<Button>Solid</Button>

Variants

You can use 4 variants of button. Just use v prop.

<x.div spaceX="4">
   <Button>Solid</Button>
   <Button v="outline">Outline</Button>
   <Button v="clear">Clear</Button>
   <Button v="link">Link</Button>
</x.div>

Sizes

You can use 4 sizes of button. Just use s prop.

<x.div spaceX="4">
   <Button s="xs">XS Button</Button>
   <Button s="sm">SM Button</Button>
   <Button s="md">MD Button</Button>
   <Button s="lg">LG Button</Button>
</x.div>

Other states

<Button disabled>Disabled Button</Button>

Custom button

<Button bg="red" color="yellow">Custom Button</Button>