Components
View Metals CSS component library
Components in beta are not complete. Beta components may include bugs, missing features, and may not meet accessibility standards.
A way of informing the user of important changes in a prominent way.
A graphical representation of a user. Usually a photo, illustration, or initial.
A simple presentational component used for surface or element styling.
Buttons trigger an action such as submitting a form or showing/hiding an interface component.
A small label, generally appearing inside or in close proximity to another larger interface component, representing a status, property, or some other metadata.
Displays mono font.
Used to contain elements to a fixed width as the browser width grows.
A dropdown menu that displays a list of actions or options to a user. This component relies on the Menu component.
A block container for spacing form control elements.
A simple layout primitive to structure repeated items on multiple viewports.
A title or caption used to introduce a new section. Also used to segment components.
Help text is pertinent information that assists the user in correctly completing a field.
A form control that accepts a single line of text.
A text label for form inputs.
A collection of composable menu components that can be used anywhere.
An interface element that appears over other content. It requires an interaction from the user before they can return to whatever is underneath.
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.
A wrapper component for adding a consistent margin between components.
A component for displaying large amounts of data in rows and columns.
A generic primative for displaying text.
A form control for editing multi-line text.
Defines the general layout for a page.