Components
Button
Documentation for the Button component.
Button
Preview
Interactive
Properties
Variant
Size
Live Code Snippet
import { Button } from '@moul-dev/ui';
export default function Example() {
return (
<Button>
Button Text
</Button>
);
}The Button component is built with React Aria and styled using StyleX.
Variants
You can customize the appearance of the button using the variant prop:
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
<Button variant="danger-soft">Danger Soft</Button>Sizes
You can customize the size of the button using the size prop:
<Button size="sm">Small</Button>
<Button size="md">Medium (Default)</Button>
<Button size="lg">Large</Button>Import
import { Button } from '@moul-dev/ui';Usage
Here is a basic example of how to use the Button component:
import { Button } from '@moul-dev/ui';
export default function Example() {
return (
<Button>
{/* Component content */}
</Button>
);
}Props
Button Props
Prop
Type
Default className: react-aria-Button
| Render Prop | CSS Selector |
|---|---|
isHovered Whether the button is currently hovered. | [data-hovered] |
isPressed Whether the button is currently pressed. | [data-pressed] |
isFocused Whether the button is focused. | [data-focused] |
isFocusVisible Whether the button is keyboard focused. | [data-focus-visible] |
isDisabled Whether the button is disabled. | [data-disabled] |
isPending Whether the button is in a pending state. | [data-pending] |