Nightly Patch Machine

    @vrembem/icon-action

    3.0.11 • Public • Published

    Icon-action

    A component for displaying simple action buttons using icons.

    npm version

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

    Install

    npm i @vrembem/icon-action

    DownloadsWeekly Downloads

    23

    Version

    3.0.11

    License

    MIT

    Unpacked Size

    36.5 kB

    Total Files

    13

    Last publish

    Collaborators

    • sebnitu