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

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

export function SizeSample() {
  return (
    <HBox>
      <VBox>
        <IconButton icon={<SerendieSymbol name={"plus"} />} size="small" />
        <p>Small</p>
      </VBox>
      <VBox>
        <IconButton icon={<SerendieSymbol name={"plus"} />} />
        <p>Medium</p>
      </VBox>
      <VBox>
        <IconButton icon={<SerendieSymbol name={"plus"} />} size="large" />
        <p>Large</p>
      </VBox>
    </HBox>
  );
}

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

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

export function TypeSample() {
  return (
    <HBox>
      <VBox>
        <IconButton icon={<SerendieSymbol name={"plus"} />} />
        <p>Filled</p>
      </VBox>
      <VBox>
        <IconButton
          icon={<SerendieSymbol name={"plus"} />}
          styleType="outlined"
        />
        <p>Outlined</p>
      </VBox>
      <VBox>
        <IconButton icon={<SerendieSymbol name={"plus"} />} styleType="ghost" />
        <p>Ghost</p>
      </VBox>
    </HBox>
  );
}

Shape

Circle and Rectangle are available.

Circle

Rectangle

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

export function ShapeSample() {
  return (
    <HBox>
      <VBox>
        <IconButton shape="circle" icon={<SerendieSymbol name={"plus"} />} />
        <p>Circle</p>
      </VBox>
      <VBox>
        <IconButton
          shape="rectangle"
          styleType="outlined"
          icon={<SerendieSymbol name={"plus"} />}
        />
        <p>Rectangle</p>
      </VBox>
    </HBox>
  );
}

States

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

	Enabled	Hover	Focus Visible	Disabled
filled
ghost
outlined