Icon-action

A component for displaying simple action buttons using icons.

npm version

Source Code

npm install @vrembem/icon-action

@use "@vrembem/icon-action";

icon-action

The icon-action component consists of two parts, the icon-action and it’s child icon component. Because icon-actions only contain an icon as its content, it’s important to add an aria-label attribute with a label of what the action does for accessibility.

<button class="icon-action" aria-label="Close button">
  <svg role="img" class="icon">
    <!-- SVG markup or link ID goes here... -->
  </svg>
</button>

Disabled

When disabled using the disabled attribute, an icon-action will inherit styles to visually appear noninteractive.

<button class="icon-action" disabled>
  <svg role="img" class="icon">
    <!-- SVG markup or link ID goes here... -->
  </svg>
</button>

Loading

Icon-actions can also have a loading state by adding the is-loading state class. This is useful when an icon-action has an action that has a delayed response in order to give users a visual indicator that their action is being processed.

<button class="icon-action is-loading" disabled>
  <svg role="img" class="icon">
    <!-- SVG markup or link ID goes here... -->
  </svg>
</button>

icon-action_invert

A boolean icon-action modifier that allows icon-actions and their modifiers to provide an inversed version of themselves. Since not all icon-action styles require an inversed variant, this is typically used for when the background context of a button matters. Can be combined with icon-action_subtle boolean modifier.

<button class="icon-action" aria-label="...">...</button>
<button class="icon-action icon-action_invert" aria-label="...">...</button>

Available Combinations

  • icon-action icon-action_invert
  • icon-action icon-action_invert icon-action_subtle

icon-action_state_[value]

Adds styles for changing the look and feel of an icon-action to better reflect the urgency or status of the action.

<button class="icon-action icon-action_state_info" aria-label="...">...</button>
<button class="icon-action icon-action_state_success" aria-label="...">...</button>
<button class="icon-action icon-action_state_caution" aria-label="...">...</button>
<button class="icon-action icon-action_state_danger" aria-label="...">...</button>

Available Variations

  • icon-action_state_info
  • icon-action_state_success
  • icon-action_state_caution
  • icon-action_state_danger

icon-action_subtle

A boolean icon-action modifier that allows icon-actions and their modifiers to provide a more subtle version of themselves. Can be combined with icon-action_invert boolean modifier.

<button class="icon-action icon-action_subtle" aria-label="...">...</button>
<button class="icon-action icon-action_subtle icon-action_invert" aria-label="...">...</button>

Available Combinations

  • icon-action icon-action_subtle
  • icon-action icon-action_subtle icon-action_invert

Sass Variables

Variable Default Description
$prefix-block null String to prefix blocks with.
$prefix-element "__" String to prefix elements with.
$prefix-modifier "_" String to prefix modifiers with.
$prefix-modifier-value "_" String to prefix modifier values with.
$size (core.$font-size * core.$line-height) Sets the width and height properties.
$transition-property box-shadow, outline, outline-offset Sets the transition-property property.
$transition-duration core.$transition-duration-short Sets the transition-duration property.
$transition-timing-function core.$transition-timing-function Sets the transition-timing-function property.
$border-radius core.$border-radius-circle Sets the border-radius property.
$border null Sets the border property.
$border-color-hover null Sets the border-color property on :hover state.
$border-color-focus null Sets the border-color property on :focus state.
$border-color-active null Sets the border-color property on :active state.
$background rgba(core.$black, 0.4) Sets the background property.
$background-hover rgba(core.$black, 0.5) Sets the background property on :hover state.
$background-focus rgba(core.$black, 0.5) Sets the background property on :focus state.
$background-active rgba(core.$black, 0.6) Sets the background property on :active state.
$box-shadow 0 0 0 0 rgba(core.$black, 0) Sets the box-shadow property.
$box-shadow-hover null Sets the box-shadow property on :hover state.
$box-shadow-focus 0 0 0 0.2rem rgba(core.$black, 0.2) Sets the box-shadow property on :focus state.
$box-shadow-active null Sets the box-shadow property on :active state.
$color core.$color-invert Sets the color property.
$color-hover null Sets the color property on :hover state.
$color-focus null Sets the color property on :focus state.
$color-active null Sets the color property on :active state.
$outline none Sets the outline property.
$outline-hover null Sets the outline property on :hover state.
$outline-focus null Sets the outline property on :focus state.
$outline-active null Sets the outline property on :active state.
$outline-offset null Sets the outline-offset property.
$outline-offset-hover null Sets the outline-offset property on :hover state.
$outline-offset-focus null Sets the outline-offset property on :focus state.
$outline-offset-active null Sets the outline-offset property on :active state.
$icon-stroke-width 2.5px Sets the stroke-width property on the child icon component.
$icon-font-size core.$font-size-sm Sets the font-size property on the child icon component.
$disabled-opacity 0.6 Sets the opacity property when disabled attribute is applied.
$loading-size 0.7em Sets the size of the loading spinner.
$loading-animation-duration 0.6s Sets the animation-duration property of the loading spinner.
$loading-border-color $color Sets the border-color property of the loading spinner.
$loading-border 2px solid Sets the border property of the loading spinner.
$loading-border-tpl 1 1 0 0 The template for where to apply the border-color property. Takes boolean 1 and 0 values for top, right, bottom and left borders respectively.