Button

The Button Component is a basic UI element that enables user interaction by triggering actions or events upon click. It can be customized with text, icons, and styles to suit specific interface requirements.

Demo

import { Container, WuiApp } from "@wysteria/design"
    import WuiButton from "./WuiButton"

    export default function App() {
        return (
            <WuiApp>
                <Container justify="center">
                    <WuiButton />
                </Container>
            </WuiApp>
        )
    }

Button Types

<Button leftIcon="Home" >Filled</Button>
<Button leftIcon="Home" variant="outlined">Outlined</Button>
<Button leftIcon="Home" variant="text">BUTTON</Button>

Props

onClick

This callback is called when the button is clicked.
Type: Callback

variant

The style of the button.
Type: 'filled' (default) | 'outlined' | 'text'

leftIcon

Icon to be displayed to the left of the text. Uses Lucide Icons (opens in a new tab).
Type: String

rightIcon

Icon to be displayed to the left of the text. Uses Lucide Icons (opens in a new tab).
Type: String

padding

Padding between button border and content, and between button text and icons.
Type: 'none' | 'xs' | 'sm' | 'md' (default) | 'lg' | 'xl' | 'xxl' | xxxl

disabled

If the button is clickable or not.
Type: true | false (default)

children

The label of the button. If empty, button assumes a square aspect ratio (icon-only).
Type: String