Button | Serendie Design System

Size

There are two sizes: Small and Medium. Use Small when assuming mouse interaction on large screens such as desktop; avoid it on touch devices. Medium can be used regardless of screen size.

import { Button } from "@serendie/ui";
import { HBox } from "src/components/LayoutUtils";

export function SizeSample() {
  return (
    <HBox>
      <Button size="small">Small</Button>
      <Button size="medium">Medium</Button>
    </HBox>
  );
}

Variants

There are four variants. Choose based on action importance: use Filled for high-priority actions (e.g., submit), and Ghost or Outlined for secondary actions such as cancel. Avoid placing multiple Filled buttons on the same screen.

import { Button } from "@serendie/ui";
import { HBox } from "src/components/LayoutUtils";

export function TypeSample() {
  return (
    <HBox>
      <Button>Filled</Button>
      <Button styleType="outlined">Outlined</Button>
      <Button styleType="ghost">Ghost</Button>
      <Button styleType="rectangle">Rectangle</Button>
    </HBox>
  );
}

Buttons with icons

Icons can be placed to the left or right of the label to visually convey the action the button triggers.

import { Button } from "@serendie/ui";
import { SerendieSymbol } from "@serendie/symbols";
import { HBox } from "src/components/LayoutUtils";

export function IconSample() {
  return (
    <HBox>
      <Button leftIcon={<SerendieSymbol name="chevron-left" />}>
        LeftIcon
      </Button>
      <Button
        rightIcon={<SerendieSymbol name="chevron-right" />}
        styleType="ghost"
      >
        RightIcon
      </Button>
    </HBox>
  );
}

States

Each variant has five states. Align Disabled with the state of related components (e.g., TextField). If the action cannot complete immediately after press, use Loading to indicate the waiting state.

	Enabled	Hover	Focus Visible	Disabled	Loading
filled
ghost
outlined
rectangle