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

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

icon-action_color

<button class="icon-action icon-action_color_danger" aria-label="Close">...</button>
<button class="icon-action icon-action_color_caution" aria-label="Minimize">...</button>
<button class="icon-action icon-action_color_success" aria-label="Fullscreen">...</button>

icon-action_invert

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

icon-action_subtle

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