Components
Button

Button

Displays a button or a component that looks like a button.

StorybookFigma
Primary:
Secondary:
Outline:
Tonal:
Danger:
Transparent:

Usage

import { Button } from "@momo-webplatform/mobase/components/Button/Button";
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="tonal">Tonal</Button>
<Button variant="transparent">Transparent</Button>

API Reference

Button
PropTypeDefaultRequired
className
string--false
asChild
enumboolean false false
isLoading
enumboolean false false
isDisabled
enumboolean false false
variant
enumprimary | secondary | outline | tonal | danger | transparent primary false
size
enumdefault | sm | lg default false

Example

Variants

We provide 6 types of button:

  • Primary button: indicate the main action, one primary button at most in one section.
  • Secondary button: indicate a series of actions without priority.
  • Outline button: indicate a series of actions that are important, but aren’t the primary action in an app.
  • Tonal button: used for contexts where a lower-priority button requires slightly more emphasis than an outline would give.
  • Danger button: used for actions of risk, like deletion or authorization.
  • Transparent button: used for the most secondary action.

Sizes

Button has 3 different sizes:

States

Button has 3 different states:

Active:
Disabled:
Loading:

With Icon

You can nest icons directly inside the button. An appropriate gap is provided automatically.

As Child

Change the default rendered element for the one passed as a child, merging their props and behavior.

BreadcrumbCalendar