Button
Buttons are the primary components for displaying actions on a page. They are often referenced as Call To Actions (CTA/C2A).
Filled button
Solid buttons are the main call to action on any page.
<Button variant="filled" color="primary">
Filled action
</Button>
Color
Filled buttons are available in 4 colors: primary, success, warning and danger.
<Button variant="filled" color="primary">
Primary Filled action
</Button>
<Button variant="filled" color="success">
Success Filled action
</Button>
<Button variant="filled" color="warning">
Warning Filled action
</Button>
<Button variant="filled" color="danger">
Danger Filled action
</Button>
Outline button
Outline buttons are for secondary call to actions on any page.
<Button variant="outline" color="primary">
Outline action
</Button>
Color
Outline buttons are available in 5 colors: primary, neutral, success, warning and danger.
<Button variant="outline" color="primary">
Primary Outline action
</Button>
<Button variant="outline" color="neutral">
Neutral Outline action
</Button>
<Button variant="outline" color="success">
Success Outline action
</Button>
<Button variant="outline" color="warning">
Warning Outline action
</Button>
<Button variant="outline" color="danger">
Danger Outline action
</Button>
Ghost button
Ghost buttons are for miscellaneous actions on any page.
<Button variant="ghost" color="primary">
Ghost action
</Button>
Color
Ghost buttons are available in three colors: primary, neutral and inverted.
<Button variant="ghost" color="primary">
Primary Ghost action
</Button>
<Button variant="ghost" color="neutral">
Neutral Ghost action
</Button>
<Button variant="ghost" color="inverted">
Inverted Ghost action
</Button>
Disable state
<Button variant="filled" color="primary" disabled> Filled action </Button>
<Button variant="outline" color="primary" disabled>
Outline action
</Button>
<Button variant="ghost" color="primary" disabled>
Primary Ghost action
</Button>
<Button variant="ghost" color="neutral" disabled>
Neutral Ghost action
</Button>
Sizes
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
<Button size="xlarge">Xlarge</Button>
Type
There are three types of buttons: submit, button and reset. By default, a button component has type="submit"
Label
Button components can have text added either between the button tags or through the label attribute.
<Button variant="primary" label="Primary"></Button>
<Button variant="outline" label="Outline"></Button>
<Button variant="ghost" label="Ghost"></Button>
<button> attributes
<button> HTML element attributes are directly usable with the Button component.
<Button
label="Button with props"
form="form-id"
formaction="/submit"
formmethod="get"
/>
Icons
Left icon
With icon properties
With Children
<Button label="Button" leftIcon={<Icon icon="account_circle"/>}></Button>
<Button>
<Icon icon="account_circle"></Icon>
<Typography>Button</Typography>
</Button>
Right icon
With icon properties
With Children
<Button label="Button" rightIcon={<Icon icon="east"/>}></Button>
<Button>
<Typography>Button</Typography>
<Icon icon="east"></Icon>
</Button>
Icon button
You can wrap any Icon with Button to generate an icon button:
<Button>
<Icon icon="account_circle"></Icon>
</Button>
You can also import any icon that you need and wrap it with Button tag to adopt the styles and behavior:
<Button variant="ghost">
<StorybookIcon width="24" height="24" />
</Button>
Custom icon
To select an appropriate icon, please consult the Icon component documentation.
The leftIcon and rightIcon can either be of string type or have one of the following type:
type IconType = {
icon: string,
classes?: string,
lib?: IconLibType,
size?: IconSizeType,
variant?: IconVariantType,
};
With icon properties
With Children
<Button leftIcon={<Icon icon="applied_settings" lib="business" />} label="Button"></Button>
<Button>
<Icon icon="applied_settings" lib="business"></Icon>
<Typography>Button</Typography>
</Button>