Skip to main content

Button

Create flat, outlined, raised, branded or destructive buttons, all kind of them !

Props​

NameTypeRequiredDefaultDescription
typeStyle'flat' | 'outlined' | 'raised'Yes-The type of the button
variationStyle'normal' | 'brand' | 'destructive'Yes-The variation of the button

Types​

Flat​

Result
Loading...
Live Editor
<Button
    typeStyle="flat"
    variationStyle="normal"
>
    Button
</Button>

Outlined​

Result
Loading...
Live Editor
<Button
    typeStyle="outlined"
    variationStyle="normal"
>
    Button
</Button>

Raised​

Result
Loading...
Live Editor
<Button
    typeStyle="raised"
    variationStyle="normal"
>
    Button
</Button>

Variations​

Normal​

Result
Loading...
Live Editor
<>
    <Button
        typeStyle="flat"
        variationStyle="normal"
    >
        Button
    </Button>
    <Button
        typeStyle="outlined"
        variationStyle="normal"
    >
        Button
    </Button>
    <Button
        typeStyle="raised"
        variationStyle="normal"
    >
        Button
    </Button>
</>

Brand​

Result
Loading...
Live Editor
<>
    <Button
        typeStyle="flat"
        variationStyle="brand"
    >
        Button
    </Button>
    <Button
        typeStyle="outlined"
        variationStyle="brand"
    >
        Button
    </Button>
    <Button
        typeStyle="raised"
        variationStyle="brand"
    >
        Button
    </Button>
</>

Destructive​

Result
Loading...
Live Editor
<>
    <Button
        typeStyle="flat"
        variationStyle="destructive"
    >
        Button
    </Button>
    <Button
        typeStyle="outlined"
        variationStyle="destructive"
    >
        Button
    </Button>
    <Button
        typeStyle="raised"
        variationStyle="destructive"
    >
        Button
    </Button>
</>