360Giving Design System - Components

Buttons 

<p>
    <a href="#" class="button">Button</a>
    <button class="button button--orange">Button Orange</button>
    <button class="button button--teal">Button teal</button>
    <button class="button button--teal-dark">Button teal</button>
    <button class="button button--yellow">Button yellow</button>
    <button class="button button--red">Button red</button>
    <button class="button button--black">Button black</button>
    <button class="button button--disabled">Button disabled</button>
</p>

<p>
    <a href="#" class="button">Button</a>
    <button class="button button--orange button--solid">Button solid Orange</button>
    <button class="button button--teal button--solid">Button solid teal</button>
    <button class="button button--teal-dark button-solid">Button teal</button>
    <button class="button button--yellow button--solid">Button solid yellow</button>
    <button class="button button--red button--solid">Button solid red</button>
    <button class="button button--black button--solid">Button solid black</button>
    <button class="button button--disabled button--solid">Button solid disabled</button>
</p>

<p>
    <a href="#" class="button button--large">Button</a>
    <button class="button button--large button--orange">Button Orange</button>
    <button class="button button--large button--teal">Button teal</button>
    <button class="button button--large button--yellow">Button yellow</button>
    <button class="button button--large button--red">Button red</button>
    <button class="button button--large button--black">Button black</button>
    <button class="button button--large button--disabled">Button disabled</button>
</p>

<p>
    <a href="#" class="button button--small">Button</a>
    <button class="button button--small button--orange">Button Orange</button>
    <button class="button button--small button--teal">Button teal</button>
    <button class="button button--small button--yellow">Button yellow</button>
    <button class="button button--small button--red">Button red</button>
    <button class="button button--small button--black">Button black</button>
    <button class="button button--small button--disabled">Button disabled</button>
</p>
 
{# create this using the fractal variants #}

<p>
<a href="#" class="button">Button</a>
<button class="button button--orange">Button Orange</button>
<button class="button button--teal">Button teal</button>
<button class="button button--teal-dark">Button teal</button>
<button class="button button--yellow">Button yellow</button>
<button class="button button--red">Button red</button>
<button class="button button--black">Button black</button>
<button class="button button--disabled">Button disabled</button>
</p>

<p>
<a href="#" class="button">Button</a>
<button class="button button--orange button--solid">Button solid Orange</button>
<button class="button button--teal button--solid">Button solid teal</button>
<button class="button button--teal-dark button-solid">Button teal</button>
<button class="button button--yellow button--solid">Button solid yellow</button>
<button class="button button--red button--solid">Button solid red</button>
<button class="button button--black button--solid">Button solid black</button>
<button class="button button--disabled button--solid">Button solid disabled</button>
</p>

<p>
<a href="#" class="button button--large">Button</a>
<button class="button button--large button--orange">Button Orange</button>
<button class="button button--large button--teal">Button teal</button>
<button class="button button--large button--yellow">Button yellow</button>
<button class="button button--large button--red">Button red</button>
<button class="button button--large button--black">Button black</button>
<button class="button button--large button--disabled">Button disabled</button>
</p>

<p>
<a href="#" class="button button--small">Button</a>
<button class="button button--small button--orange">Button Orange</button>
<button class="button button--small button--teal">Button teal</button>
<button class="button button--small button--yellow">Button yellow</button>
<button class="button button--small button--red">Button red</button>
<button class="button button--small button--black">Button black</button>
<button class="button button--small button--disabled">Button disabled</button>
</p>
 
/* No context defined. */
  • Content: 
    const helloWorldButtons = document.querySelectorAll('.js-hello-world')

// for each helloWorldButton
helloWorldButtons.forEach((button) => {
  // add an event listener for clicks
  button.addEventListener('click', () => {
    // when a HelloWorldButton is clicked, alerts "Hello, world!"
    alert('Hello, world!')
  })
})
  • URL: /components/raw/buttons/buttons.js
  • Filesystem Path: src/components/02-elements/buttons/buttons.js
  • Size: 322 Bytes
  • Content: 
    @mixin button {
  border: 2px solid var(--border-color);
  color: var(--text-color);
  display: inline-block;
  border-radius: 3px;
  padding: 6px 24px 6px;
  font-size: 1rem;
  font-weight: 400;
  background-color: var(--bg-color);
  text-decoration: none;
  cursor: pointer;

}

.button {
  --border-color: hsla(var(--base-hsl), 1);
  --text-color: hsla(var(--base-hsl), 1);
  --bg-color: transparent;
  @include button;

  &.button--small {
    padding: 2px 16px 2px;
    border-width: 1px;
    font-size: .9rem;
  }

  &.button--large {
    padding: 10px 32px 10px;
    border-width: 3px;
    font-size: 1.3rem;
  }

  &.button--unstyled {
    border: 0;
    padding: 0;
  }

  &.button--white {
    --border-color: hsla(var(--white-hsl), 1);
    --text-color: hsla(var(--white-hsl), 1);
    --bg-color: transparent;
  }

  &.button--orange {
    --border-color: var(--color-orange);
    --text-color: hsla(var(--orange-dark-hsl), 1);
    --bg-color: transparent;

    &.button--solid {
      --text-color: hsla(var(--white-hsl), 1);
      --bg-color: var(--color-orange);
    }
  }

  &.button--teal {
    --border-color: var(--color-teal);
    --text-color: hsla(var(--teal-dark-hsl), 1);
    --bg-color: transparent;

    &.button--solid {
      --text-color: hsla(var(--white-hsl), 1);
      --bg-color: var(--color-teal);
    }
  }

  &.button--teal-dark {
    --border-color: var(--color-teal-dark);
    --text-color: hsla(var(--teal-dark-hsl), 1);
    --bg-color: transparent;

    &.button--solid {
      --text-color: hsla(var(--white-hsl), 1);
      --bg-color: var(--color-teal-dark);
    }
  }

  &.button--yellow {
    --border-color: var(--color-yellow);
    --text-color: var(--color-yellow-dark);
    --bg-color: transparent;

    &.button--solid {
      --text-color: hsla(var(--base-hsl), 1);
      --bg-color: var(--color-yellow);
    }
  }

  &.button--red {
    --border-color: var(--color-red);
    --text-color: var(--color-red);
    --bg-color: transparent;
    
    &.button--solid {
      --text-color: hsla(var(--white-hsl), 1);
      --bg-color: var(--color-red);
    }
  }

  &.button--black {
    --border-color: var(--color-black);
    --bg-color: var(--color-black);
    --text-color: var(--color-white);
  }

  &.button--disabled {
    opacity: .3 !important;
    pointer-events: none !important;

    &.button--solid {
      --text-color: hsla(var(--base-hsl), 1);
      --bg-color: var(--base-hsl);
    }
  }

  &.bold {
    font-weight: bold;
  }
}
  • URL: /components/raw/buttons/buttons.scss
  • Filesystem Path: src/components/02-elements/buttons/buttons.scss
  • Size: 2.5 KB

No notes defined.