Serendie Design System

AboutGet StartedFoundationsComponents
© Mitsubishi Electric Corporation

Icon Button

Clickable action button that conveys intent visually with an icon.

Last updated 11/1/2024

Size

Small, Medium, and Large are available. Small assumes pointer use on large screens and is discouraged on touch devices.

Small

Medium

Large

Variants

Three variants; choose by action importance. Use Filled for primary actions and Ghost or Outlined for secondary ones. Avoid multiple Filled buttons on one screen.

Filled

Outlined

Ghost

Shape

Circle and Rectangle are available.

Circle

Rectangle

States

Each variant has four states. Align Disabled with related components such as TextField.

EnabledHoverFocus VisibleDisabled
filled
ghost
outlined