Icon button

a compact, icon-only action. always give it a label for assistive tech.

Example

<span class="lucent-icon-button lucent-icon-button--primary lucent-icon-button--md">
  <button class="lucent-icon-button__inner" type="button" aria-label="Like">
    <span class="lucent-icon lucent-icon--md" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">favorite</span>
    </span>
  </button>
</span>
<span class="lucent-icon-button lucent-icon-button--secondary lucent-icon-button--md">
  <button class="lucent-icon-button__inner" type="button" aria-label="Edit">
    <span class="lucent-icon lucent-icon--md" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">edit</span>
    </span>
  </button>
</span>
<span class="lucent-icon-button lucent-icon-button--ghost lucent-icon-button--md">
  <button class="lucent-icon-button__inner" type="button" aria-label="More">
    <span class="lucent-icon lucent-icon--md" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">more_vert</span>
    </span>
  </button>
</span>
<span class="lucent-icon-button lucent-icon-button--danger lucent-icon-button--md">
  <button class="lucent-icon-button__inner" type="button" aria-label="Delete">
    <span class="lucent-icon lucent-icon--md" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">delete</span>
    </span>
  </button>
</span>

Playground

variant
size
disabled
loading 
 
 
 
Using it
 
 
  
 Angular  lucent-icon-button 
import { LucentIconButton } from '@design-foundry/lucent-angular';
 		 
 
 Stylesheet  .lucent-icon-button 
@design-foundry/lucent-styles/core.css
 		 
  
 
  
API
 
 
 
NameKindTypeDefaultDescription
  
 icon input string '' Material Icons ligature. 
 variant input ButtonVariant primary visual emphasis. 
 tone input neutral | danger neutral  
 size input IconButtonSize md control density. 
 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. 
 ariaLabel input string '' accessible name. required, since there is no text. 
 clicked output MouseEvent  emits the click event. 
  
 
  
Theming
 
 
 
Color (13)
  
 
Size & spacing (8)
  
 
Shadow (1)
  
 
Other (2)