CSSN'T Components 1.0

account_circle

Avatar & Avatar Stack

User image/initials with size variants.

Avatar Examples

Copy-ready examples for Avatar and AvatarStack (they can be used together or separately).

Avatar (content types)

Avatar supports text initials, image, and icon rendering.

Live preview

Profile placeholder

Text / Image / Icon

import Avatar from "@/packages/ui/src/_components/avatar/Avatar";

export default function Example() {
  return (
    <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
      <Avatar typeOfContent="text" text="John Doe" />
      <Avatar typeOfContent="img" url="/images/user.jpg" alt="User profile photo" />
      <Avatar typeOfContent="icon" iconName="Home" />
    </div>
  );
}

Avatar (sizes)

Use size to change the avatar dimensions (sm / md / lg).

Live preview

Small / Medium / Large

import Avatar from "@/packages/ui/src/_components/avatar/Avatar";

export default function Example() {
  return (
    <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
      <Avatar typeOfContent="text" text="John Doe" size="small" />
      <Avatar typeOfContent="text" text="John Doe" size="medium" />
      <Avatar typeOfContent="text" text="John Doe" size="large" />
    </div>
  );
}

Avatar (surface styles)

Use style to switch the surface appearance.

Live preview

Outlined / Filled / Tonal / Elevated

import Avatar from "@/packages/ui/src/_components/avatar/Avatar";

export default function Example() {
  return (
    <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
      <Avatar typeOfContent="text" text="Jane Doe" style="outlined" />
      <Avatar typeOfContent="text" text="Jane Doe" style="filled" />
      <Avatar typeOfContent="text" text="Jane Doe" style="tonal" />
      <Avatar typeOfContent="text" text="Jane Doe" style="elevated" />
    </div>
  );
}

Avatar (with sub label)

Use subText to render a small label under the avatar.

Live preview

OnlineAdmin
Profile placeholder
Away

Sub label (subText)

import Avatar from "@/packages/ui/src/_components/avatar/Avatar";

export default function Example() {
  return (
    <div style={{ display: "flex", gap: 18, flexWrap: "wrap", alignItems: "center" }}>
      <Avatar typeOfContent="text" text="Jane Doe" subText="Online" />
      <Avatar typeOfContent="icon" iconName="Work" subText="Admin" />
      <Avatar typeOfContent="img" url="/images/user.jpg" alt="User profile photo" subText="Away" />
    </div>
  );
}

Avatar (states & variants)

Interactive/disabled/square + semantic variants for icon avatars.

Live preview

States and variants

import Avatar from "@/packages/ui/src/_components/avatar/Avatar";

export default function Example() {
  return (
    <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
      <Avatar typeOfContent="text" text="Interactive" isInteractive />
      <Avatar typeOfContent="text" text="Disabled" disabled />
      <Avatar typeOfContent="text" text="Square" isSquared />

      <Avatar typeOfContent="icon" iconName="Warning" variant="warning" />
      <Avatar typeOfContent="icon" iconName="Error" variant="danger" />
    </div>
  );
}

Avatar (controlled example)

Example using local state to swap the content type.

Live preview

Selected

Switch content type

import { useState } from "react";
import Avatar from "@/_components/avatar/Avatar";

export default function Example() {
  const [mode, setMode] = useState<"text" | "img" | "icon">("text");

  return (
    <div style={{ display: "grid", gap: 12 }}>
      <div style={{ display: "flex", gap: 10 }}>
        <button type="button" onClick={() => setMode("text")}>Text</button>
        <button type="button" onClick={() => setMode("img")}>Image</button>
        <button type="button" onClick={() => setMode("icon")}>Icon</button>
      </div>

      {mode === "text" ? <Avatar typeOfContent="text" text="Alex Kim" subText="Selected" /> : null}
      {mode === "img" ? <Avatar typeOfContent="img" url="/images/user.jpg" alt="User profile photo" subText="Selected" /> : null}
      {mode === "icon" ? <Avatar typeOfContent="icon" iconName="Person" subText="Selected" /> : null}
    </div>
  );
}

AvatarStack (basic overflow)

Render a stack and limit how many avatars are shown. Remaining avatars are summarized in a trailing element.

Live preview

1+

Horizontal stack + overflow

import Avatar from "@/packages/ui/src/_components/avatar/Avatar";
import AvatarStack from "@/packages/ui/src/_components/avatarStack/AvatarStack";

export default function Example() {
  return (
    <AvatarStack limitElementsToShow={3} size="small" directionStack="horizontal">
      {[
        <Avatar key="a" typeOfContent="text" text="John Doe" />,
        <Avatar key="b" typeOfContent="text" text="Jane Doe" />,
        <Avatar key="c" typeOfContent="text" text="Chris Doe" />,
        <Avatar key="d" typeOfContent="text" text="Sam Doe" />,
      ]}
    </AvatarStack>
  );
}

AvatarStack (vertical + density)

Use directionStack and density to control flow and spacing.

Live preview

0+
0+

Vertical stack (dense vs spaced)

import Avatar from "@/packages/ui/src/_components/avatar/Avatar";
import AvatarStack from "@/packages/ui/src/_components/avatarStack/AvatarStack";

export default function Example() {
  return (
    <div style={{ display: "grid", gap: 18 }}>
      <AvatarStack limitElementsToShow={4} size="medium" directionStack="vertical" density="dense">
        {[
          <Avatar key="a" typeOfContent="text" text="John Doe" />,
          <Avatar key="b" typeOfContent="text" text="Jane Doe" />,
          <Avatar key="c" typeOfContent="text" text="Chris Doe" />,
          <Avatar key="d" typeOfContent="text" text="Sam Doe" />,
        ]}
      </AvatarStack>

      <AvatarStack limitElementsToShow={4} size="medium" directionStack="vertical" density="spaced">
        {[
          <Avatar key="a" typeOfContent="text" text="John Doe" />,
          <Avatar key="b" typeOfContent="text" text="Jane Doe" />,
          <Avatar key="c" typeOfContent="text" text="Chris Doe" />,
          <Avatar key="d" typeOfContent="text" text="Sam Doe" />,
        ]}
      </AvatarStack>
    </div>
  );
}

AvatarStack (mixed content)

You can mix Avatar types in a single stack. isInteractive applies a stack-level modifier class.

Live preview

Profile placeholder
0+

Mixed avatars + interactive

import Avatar from "@/packages/ui/src/_components/avatar/Avatar";
import AvatarStack from "@/packages/ui/src/_components/avatarStack/AvatarStack";

export default function Example() {
  return (
    <AvatarStack limitElementsToShow={5} size="large" directionStack="horizontal" isInteractive>
      {[
        <Avatar key="a" typeOfContent="img" url="/images/user.jpg" alt="User profile photo" />,
        <Avatar key="b" typeOfContent="text" text="Jane Doe" />,
        <Avatar key="c" typeOfContent="icon" iconName="Star" variant="secondary" />,
        <Avatar key="d" typeOfContent="text" text="Chris Doe" />,
        <Avatar key="e" typeOfContent="icon" iconName="Verified" variant="success" />,
      ]}
    </AvatarStack>
  );
}

AvatarStack (disabled)

disabled adds a stack-level modifier. You can also pass disabled to each Avatar.

Live preview

1+

Disabled stack

import Avatar from "@/packages/ui/src/_components/avatar/Avatar";
import AvatarStack from "@/packages/ui/src/_components/avatarStack/AvatarStack";

export default function Example() {
  return (
    <AvatarStack limitElementsToShow={3} size="small" directionStack="horizontal" disabled>
      {[
        <Avatar key="a" typeOfContent="text" text="John Doe" disabled />,
        <Avatar key="b" typeOfContent="text" text="Jane Doe" disabled />,
        <Avatar key="c" typeOfContent="text" text="Chris Doe" disabled />,
        <Avatar key="d" typeOfContent="text" text="Sam Doe" disabled />,
      ]}
    </AvatarStack>
  );
}

On this page

Avatar Props

Avatar — Props
PropTypeRequiredDefaultDescription
typeOfContent"img" | "text" | "icon"No—Selects what the avatar renders. Recommended: always pass this prop; otherwise the avatar renders no inner content.
size"small" | "medium" | "large"No"small"Size variant (maps to --sm / --md / --lg classes).
style"outlined" | "filled" | "tonal" | "elevated"No"outlined"Surface style variant.
variant"primary" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "info"No"primary"Semantic / color variant (also forwarded to the icon when typeOfContent='icon').
isInteractivebooleanNofalseAdds an interactive modifier class (CSS-driven).
disabledbooleanNofalseAdds a disabled modifier class (CSS-driven).
isSquaredbooleanNofalseRenders a squared avatar (CSS-driven).
textstringNo"John Doe"Only used when typeOfContent='text'. Initials are generated from this string (fallback is 'John Doe').
urlstringNo—Only used when typeOfContent='img'. Image URL.
altstringNo—Only used when typeOfContent='img'. Image alt text.
iconNamestringNo"Home"Only used when typeOfContent='icon'. Icon name.
subTextstringNo—Optional small label rendered under the avatar.

Avatar stack Props

Avatar stack — Props
PropTypeRequiredDefaultDescription
limitElementsToShownumberYes—Max number of avatar children to render in the stack. Only items with index < limitElementsToShow are rendered.
childrenReactElement<IAvatarProps, typeof Avatar>[]Yes—Array of <Avatar /> elements to display.
directionStack"horizontal" | "vertical"No"horizontal"Stack direction / flow.
size"small" | "medium" | "large"No"small"Stack size modifier (affects avatar sizing via CSS).
density"dense" | "spaced"No—Optional spacing density modifier.
isInteractivebooleanNofalseAdds an interactive modifier class (CSS-driven).
disabledbooleanNofalseAdds a disabled modifier class (CSS-driven).