Chips

The chips component is used for a minimal icon button actions. It’s often used in conjunction with dismissible, tooltips and used within badges, notices and off-canvas component blocks.

<button class="chip" aria-label="Close">{% include icons/x.svg %}</button>

Incuded are color modifiers to change the look of the chips element depending on it’s context.

<a href="#" class="chip light">{% include icons/x.svg %}</a>
<a href="#" class="chip red">{% include icons/x.svg %}</a>
<a href="#" class="chip yellow">{% include icons/x.svg %}</a>
<a href="#" class="chip green">{% include icons/x.svg %}</a>

Variable Map

Chips element settings are encompassed within the $chips map and are used in chip mixins to set default values.

$chips: (
  'output' : true,
  'output-modifiers' : true,
  'class' : 'chip',

  'margin' : 0,
  'padding' : 0.25em,
  'font-size' : 1rem,
  'border' : none,
  'border-radius' : 50%,
  'transition' : $transition,

  'modifiers' : (
    'default' : (
      'color' : $white,
      'background' : rgba($black, 0.25),
      'hover' : (
        'color' : $white,
        'background' : rgba($black, 0.5),
      ),
    ),
    'light' : (
      'color' : $color,
      'background' : rgba($white, 0.5),
      'hover' : (
        'color' : $color,
        'background' : rgba($white, 1),
      ),
    ),
    'danger' : (
      'selector' : '&.red, &.danger',
      'background' : $red,
      'hover' : (
        'background' : $red-700,
      ),
    ),
    'warning' : (
      'selector' : '&.yellow, &.warning',
      'background' : $orange,
      'hover' : (
        'background' : $orange-700,
      ),
    ),
    'success' : (
      'selector' : '&.green, &.success',
      'background' : $green,
      'hover' : (
        'background' : $green-700,
      ),
    ),
  ),

) !default;

make-chip

Creates the base styles for the chips element.

@include make-chip( $options: () );
Variable Type Default
$options Map $chips

add-chip-modifiers

Creates styles for the chips elements along with modifiers.

@include make-chip( $options: () );
Variable Type Default
$options Map $chips