Button

Buttons are essential components in a user interface. They are used to trigger actions and provide users with feedback. A button should immediately trigger an action on a page or screen when clicked or tapped.

---

Usage

import { Button } from "@newfold/ui-component-library";

<Button>Button 🤟</Button>

---

Variants

The Button provides four variants, each with a unique color scheme and intent.

1. Primary (default)

Primary buttons are used to highlight the most important action or call to action on a page or screen.

<Button>
    Primary (default)
</Button>

2. Secondary

Secondary buttons are used to offer secondary or supplementary actions to users that are less important than the primary action.

<Button variant="secondary">
    Secondary
</Button>

3. Error

Error buttons are used to warn users of potentially hazardous or irreversible actions.

<Button variant="error">
    Error
</Button>

4. Upsell

Upsell buttons are used to indicate the start of a flow that eventually leads to a purchase, subscription or upgrade.

<Button variant="Upsell">
    Upsell
</Button>

---

Sizes

The Button variants can be used in three different sizes.

1. Large

The large button size is often used ads and upsells that require significant user attention. It can also be useful for touch interfaces, where larger buttons are easier to tap.

<div className="nfd-flex nfd-gap-3">
    <Button size="large">Primary Large</Button>
    <Button size="large" variant="secondary">Secondary Large</Button>
    <Button size="large" variant="error">Error Large</Button>
    <Button size="large" variant="upsell">Upsell Large</Button>
</div>

2. Default

The default button size is used for the vast majority of actions.

<div className="nfd-flex nfd-gap-2.5">
    <Button>Primary Default</Button>
    <Button variant="secondary">Secondary Default</Button>
    <Button variant="error">Error Default</Button>
    <Button variant="upsell">Upsell Default</Button>
</div>

3. Small

The small button size is very useful for fitting more actions in a smaller space, like in tables. This approach ensures that the user interface remains tidy and uncluttered.

<div className="nfd-flex nfd-gap-2">
    <Button size="small">Small Default</Button>
    <Button size="small" variant="secondary">Small Secondary</Button>
    <Button size="small" variant="error">Small Error</Button>
    <Button size="small" variant="upsell">Small Upsell</Button>
</div>

---

States

In addition to the default, hover, and focus states, two other button states have been specified.

1. Loading State

The loading state is used when a button click triggers a process that takes some time to complete, such as running a data optimization or uploading a file.

<Button isLoading>
    Loading...
</Button>

2. Disabled State

The disabled state, represented by a transparent button, is used when the button cannot be clicked due to a certain condition.

<Button disabled>
    Disabled
</Button>

info

The disabled state does not remove pointer-events. If you want to remove pointer-events, you can use the className prop to add a class that sets pointer-events to none.

<Button
    className="nfd-pointer-events-none"
    disabled
>
    Disabled & without pointer-events
</Button>

---

Props

Attribute	Type	Description	Default
children*	node |	Button content.	-
as	button | a | span | div |	The HTML element to render.	button
type	button | submit | reset |	-	-
variant	primary | secondary | error | upsell |	The variant of the button.	primary
size	default | small | large |	-	default
isLoading	bool |	-	false
disabled	bool |	-	false
className	string |	-	-