Components
Icon Button

Icon Button

A button designed specifically for usage with a single icon.

StorybookFigma

Usage

import { IconButton } from "@momo-webplatform/mobase/components/IconButton/IconButton";
<IconButton variant="primary">
  <PlusIcon className="w-4 h-4" />
</IconButton>

API Reference

IconButton
PropTypeDefaultRequired
className
string--false
asChild
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 2 different states:

Active:
Disabled:

As Child

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

DialogHeading Group