LCARS UI Components

This skill provides the CSS techniques for building specific elements of the LCARS interface. Prerequisite: You must first review ui-lcars-foundations for the core colors and layout grid.

The LCARS Pill Button

The fundamental interactive unit of LCARS is the elongated pill-shaped button.

.lcars-button {
  display: inline-block;
  background-color: var(--lcars-orange);
  color: #000; /* Text is usually black on the bright buttons */
  font-family: 'Antonio', sans-serif;
  text-transform: uppercase;
  text-align: right; /* Text pushed to the edge */
  padding: 10px 15px;