A button is a rounded rectangle that is named with text. Clicking a button performs the action described by the button's name.

A standard button measures 59px wide and 20px tall. We use the .btn class.

When pressed, buttons invert. The button below is shown active.

Buttons can have dynamic widths.

Default buttons have an extra outline.

Disabled buttons use the disabled attribute.

A radio button is a Macintosh control that displays a setting, either on or off, and is part of a group in which only one button can be on at a time.

Radio buttons can be rendered by specifying a radio type on an input tag and assigning it a name.

Checkboxes, like radio buttons, provide alternative choices for users. A checkbox is a square with label text next to it.

Checkboxes can be rendered by specifying a checkbox type on an input tag and assigning it a name.

The menu bar extends across the top of the screen and contains words and icons that serve as the title of each menu.

A menu bar consists of menu elements with dropdown menus. We use the .menu-bar class.

Single items use aria-haspopup="false".

Dropdown-only menu:

A select menu can be used to create a drop-down list, typically used in forms.

Select menus can be rendered using the select and option elements.

A text box is a basic control that allows users to enter text.

Text boxes can be rendered using the input element with a text type.

The title bar displays the name of the document or application.

Title bars can be created using the .title-bar class along with .title, .close, and .resize elements.

The window's content area is where users interact with the document or application.

Window contents can be created using the .window-pane class.

A dialog box is a type of window that requests information or provides information to the user.

Dialogs can be created using the .standard-dialog class.

Alert dialogs can be created using the .alert-dialog class.