Icon-action

A component for displaying simple action buttons using icons.

Documentation

Installation

npm install @vrembem/icon-action

Styles

@use "@vrembem/icon-action";

Markup

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>

Modifiers

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 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>

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>

Available Combinations

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

Customization

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 → 9999px | 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. |