Default The default form of a button.
Rounded The button has a rounded appearance:
< Button rounded = { true } > Rounded </ Button >
Rounded The button has an outlined appearance:
( ) => (
< >
< Button rounded = { false } appearance = " outline " > Outline </ Button >
< Button rounded = { true } appearance = " outline " > Outline </ Button >
</ >
) ;
Disabled The button is disabled:
Disabled Disabled Disabled Disabled
( ) => (
< >
< Button rounded = { false } appearance = " default " disabled = { true } > Disabled </ Button >
< Button rounded = { true } appearance = " default " disabled = { true } > Disabled </ Button >
< Button rounded = { false } appearance = " outline " disabled = { true } > Disabled </ Button >
< Button rounded = { true } appearance = " outline " disabled = { true } > Disabled </ Button >
</ >
) ;
Type Danger The danger button appears as a final confirmation for a destructive action such as deleting. These are found mostly in confirmation modals.
( ) => (
< >
< Button rounded = { false } appearance = " default " type = " danger " > Danger </ Button >
< Button rounded = { true } appearance = " default " type = " danger " > Danger </ Button >
< Button rounded = { false } appearance = " outline " type = " danger " > Danger </ Button >
< Button rounded = { true } appearance = " outline " type = " danger " > Danger </ Button >
</ >
) ;
Warning A warning button appears before we request the user to take action, usually in anticipation of a significant change. These are found mostly in confirmation modals.
Warning Warning Warning Warning
( ) => (
< >
< Button rounded = { false } appearance = " default " type = " warning " > Warning </ Button >
< Button rounded = { true } appearance = " default " type = " warning " > Warning </ Button >
< Button rounded = { false } appearance = " outline " type = " warning " > Warning </ Button >
< Button rounded = { true } appearance = " outline " type = " warning " > Warning </ Button >
</ >
) ;
Success Success Success Success Success
( ) => (
< >
< Button rounded = { false } appearance = " default " type = " success " > Success </ Button >
< Button rounded = { true } appearance = " default " type = " success " > Success </ Button >
< Button rounded = { false } appearance = " outline " type = " success " > Success </ Button >
< Button rounded = { true } appearance = " outline " type = " success " > Success </ Button >
</ >
) ;
Full Width Buttons can be expanded to full width to fill its parent container.
< Button fitParent = { true } > Button </ Button >
Icon before Display an icon before the text.
< Button iconBefore = { < Icon /> } > Icon Before </ Button >
Icon after Display an icon after the text.
< Button iconAfter = { < Icon /> } > Icon After </ Button >
Icon only Display an icon in lieu of text.
< Button > < Icon /> </ Button >