Button

Basic buttons.

Sass Mixin

@mixin button()

Parameters

None.

<!-- Default -->
<button class="button">Primary</button>
<button class="button -secondary">Secondary</button>
<button class="button -danger">Danger</button>
<button class="button -confirm">Confirm</button>
<button disabled class="button -disabled">Disabled</button>

<!-- Ghost -->
<button class="button -ghost">Primary</button>
<button class="button -ghost -secondary">Secondary</button>
<button class="button -ghost -danger">Danger</button>
<button class="button -ghost -confirm">Confirm</button>
<button disabled class="button -ghost -disabled">Disabled</button>

<!-- Outline -->
<button class="button -outline">Primary</button>
<button class="button -outline -secondary">Secondary</button>
<button class="button -outline -danger">Danger</button>
<button class="button -outline -confirm">Confirm</button>
<button disabled class="button -outline -disabled">Disabled</button>

  • Content:
    @use "sass:list";
    @use "/resources/styles/common" as *;
    @use "/resources/styles/config";
    
    /// Button component
    ///
    ///   --color           Accent color.
    ///   --color-contrast  Text color.
    ///   --color-faded     Usually 10% opacity version of --color
    ///   --color-hover     Hover color.
    ///
    .button {
        $b: &;
    
        --button-color: var(--color, #{config.$primary});
        --button-color-contrast: var(--color-contrast, #{blackwhite(config.$primary, config.$plain-text)});
        --button-color-faded: var(--color-faded, #{rgba(config.$primary, .1)});
        --button-color-hover: var(--color-hover, #{config.$primary-hover});
    
        background-color: var(--button-color);
        border: none;
        color: var(--button-color-contrast);
        cursor: pointer;
        display: inline-block;
        font-weight: 700;
        padding: config.$padding;
        transition: background-color var(--duration-fast) config.$fade-easing;
    
        &:hover,
        &:focus {
            background-color: var(--button-color-hover);
        }
    
    
        &.-disabled,
        &[disabled] {
            --button-color: #{config.$disabled};
    
            pointer-events: none;
        }
    
        &.-secondary {
            --button-color: #{config.$secondary};
            --button-color-contrast: #{blackwhite(config.$secondary, config.$plain-text)};
            --button-color-faded: #{rgba(config.$secondary, .1)};
            --button-color-hover: #{config.$secondary-hover};
        }
    
        &.-danger {
            --button-color: #{config.$danger};
            --button-color-contrast: #{blackwhite(config.$danger, config.$plain-text)};
            --button-color-faded: #{rgba(config.$danger, .1)};
            --button-color-hover: #{config.$danger-hover};
        }
    
        &.-confirm {
            --button-color: #{config.$confirm};
            --button-color-contrast: #{blackwhite(config.$confirm, config.$plain-text)};
            --button-color-faded: #{rgba(config.$confirm, .1)};
            --button-color-hover: #{config.$confirm-hover};
        }
    
    
        &.-ghost {
            background-color: transparent;
            color: var(--button-color);
            transition: background-color var(--duration-fast) config.$fade-easing,
                color var(--duration-fast) config.$fade-easing;
    
            &:hover,
            &:focus {
                background-color: var(--button-color-faded);
                box-shadow: none;
            }
        }
    
    
        &.-outline {
            background-color: transparent;
            box-shadow: 0 0 0 2px inset var(--button-color);
            color: var(--button-color);
    
            &:hover,
            &:focus {
                background-color: var(--button-color);
                color: var(--button-color-contrast);
            }
        }
    }
    
  • URL: /components/raw/button/_index.scss
  • Filesystem Path: resources/styles/atoms/button/_index.scss
  • Size: 2.6 KB