Components

A component is a ready-made piece of a website or app, like a button or form input, that looks and behaves the same wherever it’s used.

Getting started with Figma

The Massachusetts Design System provides libraries of design assets in Figma for the most commonly used interactive components that can be adjusted and combined to meet a wide variety of use cases.

Code resources for the components are not available at this time. We are currently evaluating how we might approach this on our design system team roadmap to help enable others in the future.

Required components

State banner

The Massachusetts state banner serves as a consistent, recognizable element across all Mass.gov digital properties to let users know they are on an official state website. It must appear at the top of each page within all Mass.gov sites.

You can use either the light or dark version to complement the content below the banner.

Available components

All components in Figma are publicly available to view, with detailed documentation including usage guidelines, responsive behavior, and accessibility implementation guidelines to support engineering. Think of the core component set like a starter kit that can be used to create a wide array of digital experiences for constituents far more efficiently.

Content

Accordion 

Displays sections that can be expanded or collapsed to show or hide related information.

Badge 

Shows a small visual indicator to communicate brief information or status.

Card 

Displays related text and imagery together in a structured, scannable container.

Details toggle 

Reveals or hides additional information to keep pages concise while still offering supporting details when needed.

Form intro 

Provides a consistent introductory section for forms.

Lists 

Organizes information visually to make content easier to scan and read.

Input

Button 

Triggers an action when selected.

Checkbox 

Lets users select or deselect one or more options.

Date input 

Collects a calendar date in a consistent, standardized format.

File upload 

Lets users add files by dragging and dropping them into the upload area or selecting them from their device.

Input group 

Combines a text field with optional buttons or labels to create a connected control, commonly used for searches or data entry.

Password input 

Collects passwords with the option to show or hide characters.

Phone input 

Collects phone numbers with built-in formatting and country code options.

Radio button 

Lets users select exactly one option from a set of choices.

Text area input 

Lets users enter and edit longer blocks of text.

Text input 

Lets users enter and edit short text.

Switch 

Switches between two states, such as on and off, and maintains its state until changed again.

Navigation

Breadcrumb 

Shows users where they are within a site’s content structure and helps them navigate back.

Callout link 

Visually highlights a link with a descriptive label.

Icon button 

Shows an action or function using an icon instead of text.

Links 

Lets users navigate to another page, section, or website.

Pagination 

Breaks up long lists of content into pages and provides navigation between them.

Scrollbar 

Shows and controls the visible area of content that extends beyond the available space.

Tabs 

Provides navigation between related sections of content within the same page.

Overlays

Modal 

Displays a focused window on top of the page to capture user attention for a specific task or message.

Popover 

Shows contextual information or actions when a user interacts with an element.

Popup menu 

Displays a temporary menu of related options when triggered by an action or icon.

Tooltip 

Shows a brief, contextual hint when a user hovers or focuses on an element.

Status indicators

Chip 

Displays compact, labeled information such as a category, filter, or action.

Loader 

Indicates that content or data is in progress or loading.

Step indicator 

Shows a user’s progress through a series of steps in a process.

Notification and alerts

Inline message 

Displays important information, updates, or actions directly within the content area.

Sitewide alert 

Shows a critical or high-priority message across the top of a site or application.