Avatar

Displays a user's profile image or initials.

Sizes

Fallback (Initials)

Button

A custom button element supporting variants, types, sizes, and states.

Variants

Sizes

States

Icon Buttons

Button Types

Button Combo

Checkbox

A checkbox input for boolean selections.

States

Chit

A small visual indicator for colors, gradients, or images.

Types

Sizes

States

Combo Input

A text input with autocomplete suggestions from a predefined list.

Default

With Value

Experimental Modern

Uses the modern CSS picker styling for the dropdown.

Dialog

A modal dialog window with optional dragging support.

Open Dialog

Position Attribute

Use position attribute: center center, top left, top right, bottom left, bottom right, or combinations.

Handle Attribute

Use the handle attribute to restrict dragging to a specific element. Pass a CSS selector like handle="fig-header". Dragging will only work when initiated from within that element. Interactive elements (buttons, inputs) within the handle are still excluded from triggering drag.

<dialog is="fig-dialog" drag="true" handle="fig-header">
  <fig-header>Drag only here</fig-header>
  <fig-content>Content won't trigger drag</fig-content>
</dialog>

Non-Modal Dialog

Use .show() instead of .showModal() to open a non-modal dialog. It won't create a backdrop or trap focus, and the rest of the page remains interactive.

<dialog id="my-dialog" is="fig-dialog" drag="true">
  ...
</dialog>

<script>
  // Non-modal — no backdrop, page stays interactive
  document.getElementById('my-dialog').show();

  // Modal — backdrop + focus trap
  document.getElementById('my-dialog').showModal();
</script>

closedby Attribute

The closedby attribute controls how the dialog can be dismissed. fig-dialog defaults to closedby="any" (light dismiss).

<!-- Click outside, Esc key, or close button all dismiss -->
<dialog is="fig-dialog" closedby="any">...</dialog>

<!-- Only Esc key or close button dismiss (no click-outside) -->
<dialog is="fig-dialog" closedby="closerequest">...</dialog>

<!-- Only explicit close button dismisses -->
<dialog is="fig-dialog" closedby="none">...</dialog>

Dropdown

A select dropdown menu with options.

Default

Full Width

Autoresize to Content

Uses field-sizing: content to resize based on selected option.

Experimental Modern

Use experimental="modern" to enable the customizable select picker using ::picker(select) and appearance: base-select. This is a progressive enhancement that falls back to native select on unsupported browsers.

Experimental Modern - Dropdown Type (with many options)

Experimental Modern - Select Type (with many options)

Experimental Modern - With Icons (Bleeding Edge)

Using icons inside options requires appearance: base-select support. This is bleeding edge and may not work in all browsers.

Field

A form field container with label support.

Directions

Horizontal Fields with Different Inputs

Drag the right edge to test at different widths.

Fill Picker

A comprehensive fill picker supporting solid colors, gradients, images, video, and webcam.

Default (Auto-creates fig-chit)

With Initial Color

With Gradient

With fig-chit Child

Custom Trigger

Without Alpha

Disabled

Mode Lockdown

Use the mode attribute to lock the picker to a single fill type. The dropdown is replaced with a label and tab switching is disabled.

Solid Only

Gradient Only

Image Only

Limited Mode Selection

Use comma-separated values in the mode attribute to limit available modes while still allowing switching between them.

Solid and Gradient Only

Solid, Gradient, and Image

With fig-input-fill (mode passed through)

Event Listening

Click the swatch above and change the color to see events.

Experimental

Use the experimental attribute to pass through experimental features to internal fig-dropdown elements.

fig-fill-picker

fig-input-fill

Header

A header component for sections or panels.

Default

With Subtitle

With Actions

With Spinner

Image

An image component with upload and download capabilities.

Sizes

With Upload

With Download

Input Angle

An angle input with a circular dial interface.

Default

With Text Display

Different Values

Unbounded (no min/max — supports winding)

Show Rotations (unbounded with rotation count)

Clamped (min/max)

Radians

Turns

Width Test (Resizable)

Drag the right edge to test at different widths.

Input Color

A color picker input with optional text and alpha controls.

Swatch Only

With Text

With Alpha

Full Width

Various Colors

Picker Attribute

Use picker="figma" to use the FigFillPicker instead of the native color picker. Default is picker="native".

Native Picker (default)

Figma Picker

Figma Picker with Alpha

Figma Picker (Experimental Modern)

No Picker (text input only)

No Picker with Alpha

Width Test (Resizable)

Drag the right edge of each container to test at different widths.

Swatch Only

Text Only

Text + Alpha

Picker="figma"

Picker="figma" + Text

Picker="figma" + Text + Alpha

Picker="false" + Text

Picker="false" + Text + Alpha

Full Attribute

With Alpha in Value (#RRGGBBAA)

Picker="native" + Text + Alpha

Event Listening

Change the color above to see events.

Input Fill

A fill input that supports solid colors, gradients, images, and videos. The UI adapts based on the fill type.

Solid Color (default)

Solid Color with 50% Opacity

Linear Gradient

Radial Gradient

Angular Gradient

Image Fill

Image Fill (50% Opacity)

Video Fill

Webcam Fill

Experimental Modern

Disabled

Event Listening

Change the fill above to see events.

Input Joystick

A 2D joystick input for X/Y coordinate values.

Default (centered)

With Text Display

With Initial Value (25%, 75%)

Screen Coordinates (default: 0,0 = top-left)

Math Coordinates (0,0 = bottom-left)

With Field Label

Input Number

A numeric input with optional units and constraints.

Basic

With Units

With Transform

With Constraints

With Steppers

With Precision

Control decimal places with the precision attribute.

States

With Slots

Input Text

A text input with various types and configurations.

Basic

With Value

Types

Multiline

States

With Slots

Full Width

Layer

A hierarchical layer component for displaying nested content with expand/collapse and visibility states.

Single Layer

Without Icon

Nested Layers (Expanded)

Collapsed Layers

Hidden Layer (Dimmed)

With Action Buttons

Deep Nesting

Selected Layers

Single Layer (Selected)

Without Icon (Selected)

Nested Layers (Selected Parent)

Collapsed Layers (Selected)

Hidden Layer (Selected)

With Action Buttons (Selected)

Deep Nesting (Selected Child)

Popover

A floating panel that appears on hover or click.

Hover Trigger

Click Trigger

With Form Content

Popup

A floating foundation component built as <dialog is="fig-popup"> with anchor-based positioning and viewport-aware fallback.

Default Position (top center)

Preferred Position (bottom right)

Popover Variant (with Arrow)

Use variant="popover" to show the beak and automatically point it at the anchor. Use theme="menu" for menu-style dark surfaces.

<fig-button id="popup-open-popover">Open Popover Variant</fig-button>
<dialog is="fig-popup"
        anchor="#popup-open-popover"
        position="top center"
        variant="popover"
        theme="menu">
  ...
</dialog>

Property API

Uses the popup open property setter/getter (attribute wrapper).

Position Examples

Each example uses a different popup position with a dedicated open button and code snippet.

Top Left

<fig-button id="popup-open-top-left">Open Top Left</fig-button>
<dialog is="fig-popup" anchor="#popup-open-top-left" position="top left">
  ...
</dialog>

Top Center

<fig-button id="popup-open-top-center">Open Top Center</fig-button>
<dialog is="fig-popup" anchor="#popup-open-top-center" position="top center">
  ...
</dialog>

Top Right

<fig-button id="popup-open-top-right">Open Top Right</fig-button>
<dialog is="fig-popup" anchor="#popup-open-top-right" position="top right">
  ...
</dialog>

Bottom Left

<fig-button id="popup-open-bottom-left">Open Bottom Left</fig-button>
<dialog is="fig-popup" anchor="#popup-open-bottom-left" position="bottom left">
  ...
</dialog>

Bottom Right

<fig-button id="popup-open-bottom-right">Open Bottom Right</fig-button>
<dialog is="fig-popup" anchor="#popup-open-bottom-right" position="bottom right">
  ...
</dialog>

Center Right (Vertical Centering)

<fig-button id="popup-open-center-right">Open Center Right</fig-button>
<dialog is="fig-popup" anchor="#popup-open-center-right" position="center right" offset="12 8">
  ...
</dialog>

Center Left (Vertical Centering)

<fig-button id="popup-open-center-left">Open Center Left</fig-button>
<dialog is="fig-popup" anchor="#popup-open-center-left" position="center left" offset="12 8">
  ...
</dialog>

Single-Value Position Shorthand

Single values are supported for directional shorthand (for example: top, right).

Top (left edges aligned)

<fig-button id="popup-open-top-single">Open Top (single)</fig-button>
<dialog is="fig-popup" anchor="#popup-open-top-single" position="top" offset="12 8">
  ...
</dialog>

Right (top edges aligned)

<fig-button id="popup-open-right-single">Open Right (single)</fig-button>
<dialog is="fig-popup" anchor="#popup-open-right-single" position="right" offset="12 8">
  ...
</dialog>

Left (top edges aligned)

<fig-button id="popup-open-left-single">Open Left (single)</fig-button>
<dialog is="fig-popup" anchor="#popup-open-left-single" position="left" offset="12 8">
  ...
</dialog>

Radio

Radio buttons for single selection from a group.

Radio Group

Another Group

Disabled

Segmented Control

A group of mutually exclusive options displayed as segments.

Default

Two Options

With Icons

Many Options

Disabled (Text)

Disabled (Icons)

Shimmer

An animated gradient text effect for loading states or visual emphasis.

Horizontal (Default)

Vertical

Diagonal

Custom Duration (3s)

Paused

Slider

A range slider with various types and configurations.

Default

With Text Input

With Units

With Precision

Control decimal places in the text input with the precision attribute.

Variants

Opacity Type

Hue Type

Stepper Type

Delta Type

With Transform

Full Width

Spinner

A loading spinner indicator.

Default

In Context

Switch

A toggle switch for on/off states.

States

Without Labels

Tabs

A tabbed interface for organizing content.

Default

Two Tabs

Toast

A non-modal, time-based notification that appears at the bottom center of the screen.

Basic Toast

With Dismiss Button

With Action

No Auto-Dismiss

Custom Duration (2 seconds)

Custom Offset (64px)

Themes

Tooltip

A small popup that appears on hover to provide additional information.

Default

On Different Elements

Instant (No Delay)

Long Text

Inline Usage

Some paragraph text with a tooltip for more information.

On a Draggable Element

Icons

CSS mask-based icons using the .fig-mask-icon utility class. Icons inherit currentColor and can be sized with the --size variable.

Usage

Set the --icon CSS variable to any icon variable. Icons use currentColor so they inherit text color.

<span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>

Available Icons

Custom Size

Use the --size variable to adjust icon dimensions.

Color Inheritance

Icons inherit currentColor, so they match the parent's text color.

Inside Buttons

HStack

A horizontal flex container for laying out elements in a row.

Basic Usage

Mixed Elements

Form Controls

With Chips/Chits

VStack

A vertical flex container for laying out elements in a column.

Basic Usage

Form Layout

Settings Panel

Nested Stacks

HR

A horizontal rule for visual separation of content.

Default

In a List

Section Separator

Code

Inline and block code formatting for displaying code snippets.

Inline Code

Use the fig-button component for buttons.

Code Block

<fig-button variant="primary">
  Click me
</fig-button>

Multiple Lines

const button = document.querySelector('fig-button');
button.addEventListener('click', () => {
  console.log('Button clicked!');
});

CSS Example

fig-button {
  --button-bg: var(--figma-color-bg-brand);
  --button-color: white;
  border-radius: 6px;
}

Details

A disclosure widget for expandable/collapsible content.

Default (Closed)

Default Open

Multiple Sections

With Rich Content