Components

Overview

View Metals CSS component library

Components

Components in beta are not complete. Beta components may include bugs, missing features, and may not meet accessibility standards.

Alert

Beta

A way of informing the user of important changes in a prominent way.

Avatar

Beta

A graphical representation of a user. Usually a photo, illustration, or initial.

Box

Beta

A simple presentational component used for surface or element styling.

Button

Beta

Buttons trigger an action such as submitting a form or showing/hiding an interface component.

Chip

Beta

A small label, generally appearing inside or in close proximity to another larger interface component, representing a status, property, or some other metadata.

Code

Beta

Displays mono font.

Container

v1.0

Used to contain elements to a fixed width as the browser width grows.

Dropdown Menu

Beta

A dropdown menu that displays a list of actions or options to a user. This component relies on the Menu component.

Form Control

Beta

A block container for spacing form control elements.

Grid List

v1.0

A simple layout primitive to structure repeated items on multiple viewports.

Heading

Beta

A title or caption used to introduce a new section. Also used to segment components.

Help Text

Beta

Help text is pertinent information that assists the user in correctly completing a field.

Input

Beta

A form control that accepts a single line of text.

Label

Beta

A text label for form inputs.

Menu

Beta

A collection of composable menu components that can be used anywhere.

Modal

Beta

An interface element that appears over other content. It requires an interaction from the user before they can return to whatever is underneath.

Select

Beta

A form input used for selecting a value. When collapsed it shows the currently selected option and when expanded, it shows a scrollable list of predefined options for the user to choose from.

Stack

Beta

A wrapper component for adding a consistent margin between components.

Table

Beta

A component for displaying large amounts of data in rows and columns.

Text

Beta

A generic primative for displaying text.

Textarea

Beta

A form control for editing multi-line text.

UI Shell

Beta

Defines the general layout for a page.