Icon Button · c2n web components

c2-icon-button is a 48px circular state layer around a 24px icon. Drop any icon into the default slot: an inline <svg>, a c2-feather-* element or a c2-mat-icon ligature. Add tooltip to label it for the pointer, and theme size, shape and colours through --c2-icon-button__* custom properties.

Installation

npm install @c2n/icon-button

Usage

favorite

palette

Import

import '@c2n/icon-button'

Markup

<style>
  .small {
    --c2-icon-button__state-layer--size: 36px;
    --c2-icon-button__icon--width: 18px;
    --c2-icon-button__icon--height: 18px;
  }
  .large {
    --c2-icon-button__state-layer--size: 56px;
    --c2-icon-button__icon--width: 28px;
    --c2-icon-button__icon--height: 28px;
  }
  .filled {
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgb(127 127 127 / 0.35);
    --c2-icon-button--background-color: #18181b;
    --c2-icon-button__hover--background-color: #3f3f46;
    --c2-icon-button__icon--color: #ffffff;
    --c2-icon-button__state-layer--size: 40px;
    --c2-icon-button__icon--width: 20px;
    --c2-icon-button__icon--height: 20px;
  }
  .primary {
    --c2-icon-button--background-color: #2563eb;
    --c2-icon-button__hover--background-color: #1d4ed8;
    --c2-icon-button__icon--color: #ffffff;
    --c2-icon-button__state-layer--size: 40px;
    --c2-icon-button__icon--width: 20px;
    --c2-icon-button__icon--height: 20px;
  }
  .soft {
    --c2-icon-button--background-color: #dbeafe;
    --c2-icon-button__hover--background-color: #bfdbfe;
    --c2-icon-button__icon--color: #1d4ed8;
    --c2-icon-button--border-radius: 10px;
    --c2-icon-button__state-layer--size: 40px;
    --c2-icon-button__icon--width: 20px;
    --c2-icon-button__icon--height: 20px;
  }
  .danger {
    --c2-icon-button--background-color: #fee2e2;
    --c2-icon-button__hover--background-color: #fecaca;
    --c2-icon-button__icon--color: #dc2626;
    --c2-icon-button--border-radius: 10px;
    --c2-icon-button__state-layer--size: 40px;
    --c2-icon-button__icon--width: 20px;
    --c2-icon-button__icon--height: 20px;
  }
  .toolbar {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    background: #ffffff;
  }
  .toolbar-item {
    --c2-icon-button__state-layer--size: 32px;
    --c2-icon-button__icon--width: 18px;
    --c2-icon-button__icon--height: 18px;
    --c2-icon-button--border-radius: 6px;
    --c2-icon-button__icon--color: #52525b;
    --c2-icon-button__hover--background-color: #f4f4f5;
  }
  .toolbar-item-active {
    --c2-icon-button--background-color: #e4e4e7;
    --c2-icon-button__icon--color: #18181b;
  }
</style>
<div data-label="Default">
  <c2-icon-button>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
      <circle cx="12" cy="13" r="4"></circle>
    </svg>
  </c2-icon-button>
  <c2-icon-button>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
    </svg>
  </c2-icon-button>
  <c2-icon-button>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="18" cy="5" r="3"></circle>
      <circle cx="6" cy="12" r="3"></circle>
      <circle cx="18" cy="19" r="3"></circle>
      <path d="M8.59 13.51l6.83 3.98M15.41 6.51l-6.82 3.98"></path>
    </svg>
  </c2-icon-button>
  <c2-icon-button>
    <svg viewBox="0 0 24 24" fill="currentColor" stroke="none">
      <circle cx="12" cy="5" r="1.6"></circle>
      <circle cx="12" cy="12" r="1.6"></circle>
      <circle cx="12" cy="19" r="1.6"></circle>
    </svg>
  </c2-icon-button>
</div>
<div data-label="Tooltip">
  <c2-icon-button tooltip="Take a photo">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
      <circle cx="12" cy="13" r="4"></circle>
    </svg>
  </c2-icon-button>
  <c2-icon-button tooltip="Add to favourites">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
    </svg>
  </c2-icon-button>
  <c2-icon-button tooltip="Delete">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14"></path>
    </svg>
  </c2-icon-button>
</div>
<div data-label="Icon sources">
  <c2-icon-button tooltip="Inline SVG">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 5v14M5 12h14"></path>
    </svg>
  </c2-icon-button>
  <c2-icon-button tooltip="Feather icon"><c2-feather-settings></c2-feather-settings></c2-icon-button>
  <c2-icon-button tooltip="Feather icon"><c2-feather-bell></c2-feather-bell></c2-icon-button>
  <c2-icon-button tooltip="Material icon"><c2-mat-icon>favorite</c2-mat-icon></c2-icon-button>
  <c2-icon-button tooltip="Material icon"><c2-mat-icon>palette</c2-mat-icon></c2-icon-button>
</div>
<div data-label="Sizes">
  <c2-icon-button class="small"><c2-feather-search></c2-feather-search></c2-icon-button>
  <c2-icon-button><c2-feather-search></c2-feather-search></c2-icon-button>
  <c2-icon-button class="large"><c2-feather-search></c2-feather-search></c2-icon-button>
</div>
<div data-label="Filled / tinted">
  <c2-icon-button class="filled">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 5v14M5 12h14"></path>
    </svg>
  </c2-icon-button>
  <c2-icon-button class="primary">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 12h14M12 5l7 7-7 7"></path>
    </svg>
  </c2-icon-button>
  <c2-icon-button class="soft">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
    </svg>
  </c2-icon-button>
  <c2-icon-button class="danger">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14"></path>
    </svg>
  </c2-icon-button>
</div>
<div data-label="Toolbar">
  <div class="toolbar">
    <c2-icon-button class="toolbar-item toolbar-item-active" tooltip="Bold">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6zM6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
      </svg>
    </c2-icon-button>
    <c2-icon-button class="toolbar-item" tooltip="Italic">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M19 4h-9M14 20H5M15 4L9 20"></path>
      </svg>
    </c2-icon-button>
    <c2-icon-button class="toolbar-item" tooltip="Underline">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3M4 21h16"></path>
      </svg>
    </c2-icon-button>
    <c2-icon-button class="toolbar-item" tooltip="Link">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
      </svg>
    </c2-icon-button>
  </div>
</div>

esc

AccordionConnected, animated panels with shared borders and single or multiple expansion.Layout

AvatarImage, initials or icon for a person, with status dot and badge.Data display

BadgeTinted pill for status text, counts and dots, optionally pinned to a corner of another element.Data display

ButtonThemeable button with slots for text, prefix, suffix and running icons.Buttons

Button GroupAttached buttons with shared borders, optionally a segmented control with single or multiple selection.Buttons

CardGroups related content and actions on a single bordered surface.Layout

Chat InputAuto-growing message box with a send button for chat interfaces.Chat

Chat MessageOne chat bubble with avatar, title, timestamp and message body.Chat

CheckboxNative checkbox behaviour in a quiet, themeable box with an opt-in hover layer.Inputs

Code ViewerSyntax-highlighted code with line numbers, copy button and dark mode, powered by shiki.Data display

Color AreaTwo-dimensional area for picking saturation and value of a colour.Inputs

Color SelectColour swatch that opens a full picker built from area and slider.Inputs

Color SliderHorizontal slider for choosing a hue from 0 to 360.Inputs

Copy ButtonButton that copies text to the clipboard — the element it sits in, another element by id, or a literal string.Buttons

DetailsCollapsible disclosure built on native details and summary.Layout

Icon ButtonRound, hoverable button wrapping a slotted SVG icon.Buttons

KbdKeyboard key label for shortcuts and command hints, with the semantics of the native kbd element.Data display

LabelCaption that names and activates the control referenced by its for attribute, with a required marker.Inputs

Link ButtonText-styled control for link and navigation actions, rendered as a real anchor or a button.Navigation

ListVertical list container with single or multiple selection.Data display

List ItemSelectable row with icon slots, used on its own or as the option of list and select.Data display

OverlayAnchored popup built on the browser Popover API, positioned with floating-ui.Feedback

PaginationPage navigation in three layouts: numbered pages, a simple page status, or a table-footer row with rows-per-page.Navigation

ProgressLinear progress bar, indeterminate or filling to a value, with an optional label and count.Feedback

RadioRadio options built on native inputs, grouped into one value with keyboard navigation.Inputs

SelectDropdown that pairs a themeable trigger with an anchored list of c2-list-item options.Inputs

SeperatorHorizontal or vertical rule with an optional label, for dividing content and toolbars.Layout

SheetDialog pinned to an edge of the screen, for content that complements the page rather than interrupting it.Feedback

Side NavResponsive navigation drawer beside the page: pushes the content on large screens, slides over it with a backdrop on small ones.Navigation

SkeletonPlaceholder block standing in for content that has not arrived, in three shapes and three animations.Feedback

SliderRange input with a themeable track, thumb, step ticks and value bubble.Inputs

SpinnerCircular progress indicator, indeterminate or showing a value, with optional text.Feedback

SwitchOn/off toggle on a native switch input, with label, description and thumb icons.Inputs

TableVirtualized data grid with declarative columns, sorting, selection, pinning and resizing.Data display

TabsTab strip that shows one content panel at a time.Navigation

Text FieldSingle-line input with icon slots, clear button, helper and error text, and a character counter.Inputs

TextareaMultiline text input with resizing, helper and error text, and a character counter.Inputs

ToastNotification cards and a manager for stacked, queued notifications with independent lifetimes.Feedback

Feather Icons287 open-source Feather icons, one web component each.Icons

Mat Icon2,234 Material Icons ligatures rendered through a single element.Icons

Phosphor Icons1,512 flexible icons in six weights, one web component each.Icons

ThemingTheme every c2n component from a handful of design tokens with @c2n/theme, or reach for any component variable directly.Guide

Using c2n in an applicationThe workflow behind every c2n app: load the theme once, use c2-* tags directly, and turn every repeated pattern into a small variant or composed component.Guide