.. | ||
index.js | ||
main-button.stories.js | ||
main-button.test.js | ||
README.md | ||
styled-main-button.js |
MainButton
The main button is located at the top of the main menu. It may consist of 2 buttons, or on a click to show a pop-up window with other buttons
Usage
import MainButton from "@docspace/components/main-button";
<MainButton text="Button" isDisabled={false} isDropdown={true}>
<div>Some button</div>
<Button label="Some button" />
</MainButton>
or
<MainButton
text="Button"
isDropdown={false}
clickAction={() => SomeFunction()}
clickActionSecondary={() => SomeFunction()}
moduleName="people"
/>
Properties
Props | Type | Required | Values | Default | Description |
---|---|---|---|---|---|
className |
string |
- | - | - | Accepts class |
clickActionSecondary |
func |
- | - | - | What the secondary button will trigger when clicked |
clickAction |
func |
- | - | - | What the main button will trigger when clicked |
iconName |
string |
- | - | PeopleIcon |
Icon inside button |
id |
string |
- | - | - | Accepts id |
isDisabled |
bool |
- | - | false |
Tells when the button should present a disabled state |
isDropdown |
bool |
- | - | true |
Select a state between two separate buttons or one with a drop-down list |
moduleName |
oneOf |
- | people , mail , documents |
- | The name of the module where the button is used |
onClick |
func |
- | - | - | DropDown component click action |
opened |
bool |
- | - | - | Open DropDown |
style |
obj , array |
- | - | - | Accepts css style |
text |
string |
- | - | Button |
Button text |