Button

buttons trigger an action or a change. one primary action per view; everything else is secondary, ghost or text so the hierarchy stays calm.

Usage

Buttons trigger an action or a change of state. Give each view a single primary action, the one thing you most want the user to do, and express every other action as secondary, ghost or text so the hierarchy stays calm.

Anatomy

The host .lucent-button carries the variant and size. The real <button> inside is .lucent-button__inner; an optional prefix icon sits before .lucent-button__label. With an href, the host itself is an <a> and the inner element is a span.

<span class="lucent-button lucent-button--primary lucent-button--md">
  <button class="lucent-button__inner" type="button">
    <span class="lucent-icon lucent-icon--sm" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">check</span>
    </span>
    <span class="lucent-button__label">Save as default</span>
  </button>
</span>

Variants

Six levels of emphasis. text is the quietest, on-glass sits on a glass surface, and danger is reserved for destructive intent.

Sizes

Density follows the shared --control-height-* scale, so buttons line up with inputs, selects and every other control at the same size.

Loading and disabled

loading swaps the label for a spinner and disables interaction; disabled dims the button and removes pointer events.

Playground

variant
size
disabled
loading 
 
 
  
Do & Don't
 
 
 
 
check_circleDo
 
Keep one primary action per view; pair it with a ghost or secondary for the alternative.
 
 
 
cancelDon't
 
Stack multiple primary buttons; it flattens the hierarchy and adds noise.
 
 
 
 
check_circleDo
 
Lead the label with a verb: "Save changes", "Delete project".
 
 
 
cancelDon't
 
Fall back to vague labels like "OK" or "Submit" when a specific verb reads clearer.
 
 
 
 
check_circleDo
 
Use `loading` for async actions so the button disables itself while the request runs.
 
 
 
cancelDon't
 
Leave a button active during a pending request; it invites double submits.
 
 
 
 
Using it
 
 
  
 Angular  lucent-button 
import { LucentButton } from '@design-foundry/lucent-angular';
 		 
 
 Stylesheet  .lucent-button 
@design-foundry/lucent-styles/core.css
 		 
  
 
  
API
 
 
 
NameKindTypeDefaultDescription
  
 variant input ButtonVariant primary visual emphasis. one primary per view. 
 tone input neutral | danger neutral  
 size input xs | sm | md | lg md control density: height, padding and text. 
 loading input boolean false shows a spinner and disables the button. 
 disabled input boolean false dims the button and removes interaction. 
 type input button | submit | reset button native button type. 
 clicked output MouseEvent  emits the click event. 
  
 
  
Slots
 
 
 
AttributeDescription
  
 lucentPrefix content before the label, usually a lucent-icon. 
 lucentSuffix content after the label. 
  
 
  
Theming
 
Button reads the control-density scale plus the accent and surface roles. Override --color--semantic--accent-default to recolour every primary button, or the --control-height-* tokens to change density, with no markup changes.
 
 
Color (18)
  
 
Size & spacing (17)
  
 
Shadow (1)
  
 
Type (3)