Button
Button
Modified button component (type=button
by default), it can do loading
and add Addons to itself 💪
jsx
import Button from '@semcore/ui/button';
<Button />;
AbstractButtonProps
& & & {...}Name | Type | Description |
---|---|---|
active | boolean | Button activity state |
disabled | boolean | Disabled button state |
loading | boolean | Loading button state |
addonLeft | React.ElementType | Tag for the left Addon |
addonRight | React.ElementType | Tag for the right Addon |
hintPlacement | ["placement"] | Placement for hint |
size | Button type. Defined in Button.type or ButtonLink.type | |
use | Button usage. Defined in Button.type or ButtonLink.type | |
theme | Button theme. Defined in Button.type or ButtonLink.type |
Button.Addon
The addon is inside the button (most often it is an icon), it sets the correct margins depending on the size. It takes all properties of the Box
.
jsx
import Button from '@semcore/ui/button';
<Button.Addon />;
Button.Text
Plain text, it sets the correct margins depending on the button size. If the button uses just text without addons, it will automatically turn into the Button.Text
. It takes all properties of the Box
.
jsx
import Button from '@semcore/ui/button';
<Button.Text />;
ButtonLink
Modified button component (type=button
by default) with display as link.
jsx
import { ButtonLink } from '@semcore/ui/button';
<Button />;
AbstractButtonProps
& & & {...}Name | Type | Description |
---|---|---|
active | boolean | Button activity state |
disabled | boolean | Disabled button state |
loading | boolean | Loading button state |
addonLeft | React.ElementType | Tag for the left Addon |
addonRight | React.ElementType | Tag for the right Addon |
hintPlacement | ["placement"] | Placement for hint |
size | Button type. Defined in Button.type or ButtonLink.type | |
use | Button usage. Defined in Button.type or ButtonLink.type | |
theme | Button theme. Defined in Button.type or ButtonLink.type |
Last updated: