Buttons make common actions immediately detectable and easy to perform.
import { Button } from "@nulogy/components";
<Button>Create project</Button>
There are multiple types of buttons that all accept the same options.
Primary Buttons are used for the main action in a particular context. There is usually not more than one primary button per screen and not all of the screens require a Primary button.
import { PrimaryButton } from "@nulogy/components";
<PrimaryButton>Create project</PrimaryButton>Danger Buttons are used for destructive actions such as deleting. They are most likely to appear in confirmation dialogs.
import { DangerButton } from "@nulogy/components";
<DangerButton>Create project</DangerButton>Quiet Buttons are used for less important actions such as “Cancel” or actions that are not directly related to the context of the page (e.g Learn more …). Quiet buttons are often paired with a Primary button.
import { QuietButton } from "@nulogy/components";
<QuietButton>Create project</QuietButton>The following variations are available to all button components.
<Button size="small">Read more</Button><Button size="medium">Read more</Button><Button size="large">Read more</Button><Button fullWidth>Full Width</Button><Button icon="add" iconSide="left">Create project</Button><Button disabled>Create project</Button>| Name | Type | Default | Description |
|---|---|---|---|
size | String | medium | Accepts small, medium, or large. |
disabled | Boolean | false | Marks the button as disabled and unable to be activated. |
icon | String | null | The icon to display. See Icons for all possible options. |
iconSide | String | right | The side to display the icon. |
fullWidth | Boolean | false | Makes the button fill the width of its container. |
className | String | undefined | className passed to the button component. |
asLink | Boolean | false | When set, renders the button as an <a> link instead of a <button>. |
Button components also has access to space style props. See the style prop documentation for a full list of available props.