Button: States

Ready

HTML
View
Context
Assets
Info
Notes


        
        <button class="c-btn c-btn--default u-relative  u-flex u-cursor-pointer  u-items-center u-nowrap
   
 
  

  
    u-label-04
   

  " disabled>

    Button disabled

</button>
<br>

<button class="c-btn c-btn--primary u-relative  u-flex u-cursor-pointer  u-items-center u-nowrap
   
 
  

  
    u-label-04
   

  " disabled true>

    Button disabled

</button>
<br>

<button class="c-btn c-btn--secondary u-relative  u-flex u-cursor-pointer  u-items-center u-nowrap
   
 
  

  
    u-label-04
   

  " disabled>

    Button disabled

</button>


        {% render "@button--default", {label:'Button disabled', disabled: true}, true %}
<br>
{% render "@button--primary", {label:'Button disabled', disabled: true}, true %}
<br>
{% render "@button--secondary", {label:'Button disabled', disabled: true}, true %}


        
            
            /* No context defined. */

File:

Content:


                                // Name:            Button
// Description:     Buttons in website
//
// Component:       `c-btn`
//         
//
// Dependencies:    `settings/color.tokens`
//                  `settings/spacing.tokens`
//                  `v7_colors`
//
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;

.c-btn {

  // Custom properties
  // ======================================================================
  
  --btn-radius: #{$global-radius};
  --btn-color: #{$ui-02};
  --btn-label: #{$text-01};

  // ======================================================================
  
  padding: $padding-xsmall $padding-base;
  border: none;
  border-radius: var(--btn-radius);
  background-color: var(--btn-color);
  box-shadow: 0 0 0 1px var(--btn-color);
  color: var(--btn-label);
  transition: $global-interactive-transition;

  //
  // States - Disables
  // 

  &:disabled {
    cursor: not-allowed;
  }

  // Size Variants
  // ========================================================================

  &--large {
    padding: $padding-small $padding-base;
  }

  &--small {
    padding: $padding-xxsmall $padding-small;
  }

  // Color Variants
  // ========================================================================

  //
  // Default color
  //
  &--naked,
  &--default {
    --btn-color: var(--btn-default-color);
    --btn-label: var(--btn-default-label);
    background-color: transparent;

    &:hover {
      --btn-color: #{$ui-03};
      --btn-label: #{$text-02};
    }

    &:disabled {
      --btn-color: #{$disabled-02};
      --btn-label: #{$disabled-02};
    }
  }

  //
  // Primary color
  //
  &--primary {
    --btn-color: #{$interactive-01};
    --btn-label: #{$inverse-01};

    &:hover {
      --btn-color: #{$hover-01};
    }

    &:disabled {
      --btn-color: #{$disabled-01};
      --btn-label: #{$disabled-02};
    }
  }

  &--evidence {
    --btn-color: var(--theme-color);

    &:hover {
      --btn-color: var(--theme-color-light);
    }
  }

  // Shape Variants
  // ========================================================================

  &--rounded {
    --btn-radius: 40px;
  }

  @if $layout!=amp {
    &--active {
      background-color: var(--theme-color);
      box-shadow: 0 0 0 1px var(--theme-color);
      color: $link-01;
    }

    &--inverse {
      --btn-color: #{$ui-01};
      --btn-label: #{$ui-01};
      background-color: transparent;
    }
 
    //
    // Secondary color
    //

    &--secondary {
      --btn-color: var(--btn-secondary-color);
      --btn-label: var(--btn-secondary-label);

      &:hover {
        --btn-color: var(--btn-secondary-color-hover);
      }

      &:disabled {
        --btn-color: #{$disabled-02};
        --btn-label: #{$disabled-02};
      }
    }

    //
    // Special color
    //

    &--special {
      --btn-color: var(--theme-color);
      --btn-label: var(--btn-default-label);
      background-color: transparent;

      &:hover {
        background: linear-gradient(#22274e, var(--theme-color));
        color: #{$link-01};
      }
    }

    &--error {
      --btn-color: #{$color-red}; 
      --btn-label: #{$inverse-01};
      background-color: transparent;

      &:hover {
        background: linear-gradient(#22274e, var(--theme-color));
        color: #{$link-01};
      }
    }

    

    // Style Variants
    // ========================================================================
    &--naked,
    &--reset,
    &--link {
      --btn-color: transparent;
      box-shadow: none;
    }

    &--reset {
      margin: 0;
      padding: 0;
      border: none;
    }

    &--link {
      --btn-label: #{$interactive-01};

      &:hover {
        --btn-label: #{$hover-01};
      }

      &:disabled {
        --btn-label: #{$disabled-01};
      }
    }


    // Custom Variants
    // ========================================================================
    
    &--facebook {

      --btn-color: #1877f2;
      --btn-label: #{$inverse-01};
      font-weight: 700;
      text-align: center;

      &:hover {
        --btn-color: var(--btn-secondary-color-hover);
      }
    }

    &--google {

      --btn-color: #cf4332;
      --btn-label: #{$inverse-01};
      font-weight: 700;
      text-align: center;

      &:hover {
        --btn-color: var(--btn-secondary-color-hover);
      }
    }

    &--apple {
      
      --btn-color: var(--btn-secondary-color);
      --btn-label: var(--btn-secondary-label);
      font-weight: 700;
      text-align: center;

      &:hover {
        --btn-color: var(--btn-secondary-color-hover);
      }
    }

    &--socials {

      --btn-color: var(--btn-default-color);
      --btn-label: var(--btn-default-label);
      background-color: transparent;

      &:hover {
        --btn-color: #{$ui-03};
        --btn-label: #{$text-02};
      }

      &:disabled {
        --btn-color: #{$disabled-02};
        --btn-label: #{$disabled-02};
      }
      
    }

    &__discount {
      background-color: #{$color-green};
      top: -1rem;
      right: .5rem;
    }
  }
}

URL: /components/raw/button/button.scss
Filesystem Path: src/lib/components/button/button.scss
Size: 5.3 KB

Handle: @button--states
Variants (12): Default , Link , Naked , Primary , Secondary , Special , Dossier , Evidence , Sizes , States , Styles , Tags
Preview:
- With layout
- Component only
Filesystem Path: src/lib/components/button/button--states.njk
References (3): @button--default, @button--primary, @button--secondary

Button

Button component is used to display a button.

Variations

Possible button variations:

Default
Link
Primary
Secondary
Special
Approfondimento
Evidence
Sizes
States
Styles
Tags

Usage

Render button

In order to display a button component use following syntax:

for a default button:

  {% render "@button--default" %}

for a link button:

  {% render "@button--link" %}

for a primary button:

  {% render "@button--primary" %}

for a secondary button:

  {% render "@button--secondary" %}

for a special button:

  {% render "@button--special" %}

for a approfondimento button:

  {% render "@button--approfondimento" %}

for a evidence button:

  {% render "@button--evidence" %}

for a sizes button:

  {% render "@button--sizes" %}

for a disabled button:

  {% render "@button--states" %}

for a styles button:

  {% render "@button--styles" %}

for a tag button:

  {% render "@button--tags" %}