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

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>

Dropdown

A select dropdown menu with options.

Default

Full Width

Dropdown Neue Variant (with many options)

Select Neue Variant (with many options)

Field

A form field container with label support.

Directions

Horizontal Fields with Different Inputs

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

Event Listening

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

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

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

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

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

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

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

Many Options

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

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.

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