CBP UI Library

Button 

<!-- Primary -->
<div class="loboOwl">
    <h2 style="font-size: var(--step-2); flex: 1 0 100%">
        <pre>.button--primary</pre>
    </h2>
    <div class="u-flex" style="flex-wrap:wrap">
        <a href="#" class="button button--primary">Button</a>
        <button class="button button--primary" disabled>Disabled</button>
        <a href="#" class="button button--primary">
            <i class="fas fa-magnifying-glass fa-fw fa-lg"></i>
        </a>
        <a href="#" class="button button--primary button--small">Small Button</a>
        <a href="#" class="button button--primary button--large">Large Button</a>
    </div>
    <a href="#" class="button button--primary button--wide">Wide Button</a>
</div>


<!-- Secondary -->
<div class="loboOwl">
    <h2 style="font-size: var(--step-2); flex: 1 0 100%">
        <pre>.button--secondary</pre>
    </h2>
    <div class="u-flex" style="flex-wrap:wrap">
        <a href="#" class="button button--secondary">Button</a>
        <button class="button button--secondary" disabled>Disabled</button>
        <a href="#" class="button button--secondary">
            <i class="fas fa-magnifying-glass fa-fw fa-lg"></i>
        </a>
        <a href="#" class="button button--secondary button--small">Small Button</a>
        <a href="#" class="button button--secondary button--large">Large Button</a>
    </div>
    <a href="#" class="button button--secondary button--wide">Wide Button</a>
</div>


<!-- Primary Inverse -->
<div class="loboOwl" style="background:var(--blue--ultraDark);color:var(--white);padding: 0 1em 1em;">
    <h2 style="font-size: var(--step-2); flex: 1 0 100%">
        <pre>.button--primary.button--inverse</pre>
    </h2>
    <div class="u-flex" style="flex-wrap:wrap">
        <a href="#" class="button button--primary button--inverse">Button</a>
        <button class="button button--primary button--inverse" disabled>Disabled</button>
        <a href="#" class="button button--primary button--inverse">
            <i class="fas fa-magnifying-glass fa-fw fa-lg"></i>
        </a>
        <a href="#" class="button button--primary button--inverse button--small">Small Button</a>
        <a href="#" class="button button--primary button--inverse button--large">Large Button</a>
    </div>
    <a href="#" class="button button--primary button--inverse button--wide">Wide Button</a>
</div>


<!-- Secondary Inverse -->
<div class="loboOwl" style="background:var(--blue--ultraDark);color:var(--white);padding: 0 1em 1em;">
    <h2 style="font-size: var(--step-2); flex: 1 0 100%">
        <pre>.button--secondary.button--inverse</pre>
    </h2>
    <div class="u-flex" style="flex-wrap:wrap">
        <a href="#" class="button button--secondary button--inverse">Button</a>
        <button class="button button--secondary button--inverse" disabled>Disabled</button>
        <a href="#" class="button button--secondary button--inverse">
            <i class="fas fa-magnifying-glass fa-fw fa-lg"></i>
        </a>
        <a href="#" class="button button--secondary button--inverse button--small">Small Button</a>
        <a href="#" class="button button--secondary button--inverse button--large">Large Button</a>
    </div>
    <a href="#" class="button button--secondary button--inverse button--wide">Wide Button</a>
</div>


<div class="loboOwl" {% if inverse %}style="background:var(--blue--ultraDark);color:var(--white);padding: 0 1em 1em;"{% endif %}>
  <h2 style="font-size: var(--step-2); flex: 1 0 100%"><pre>.button--{{modifier}}{% if inverse %}.button--inverse{% endif %}</pre></h2>
  {% set baseClass = "button button--" ~ modifier %}
  {% if inverse %}{% set baseClass = baseClass ~ " button--inverse" %}{% endif %}
  <div class="u-flex" style="flex-wrap:wrap">
    <a href="#" class="{{baseClass}}">{{text}}</a>
    <button class="{{baseClass}}" disabled>Disabled</button>
    <a href="#" class="{{baseClass}}">
      <i class="fas fa-magnifying-glass fa-fw fa-lg"></i>
    </a>
    <a href="#" class="{{baseClass}} button--small">Small Button</a>
    <a href="#" class="{{baseClass}} button--large">Large Button</a>
  </div>
  <a href="#" class="{{baseClass}} button--wide">Wide Button</a>
</div>
 
/* Primary */
{
  "text": "Button",
  "modifier": "primary",
  "inverse": false
}


/* Secondary */
{
  "text": "Button",
  "modifier": "secondary",
  "inverse": false
}


/* Primary Inverse */
{
  "text": "Button",
  "modifier": "primary",
  "inverse": true
}


/* Secondary Inverse */
{
  "text": "Button",
  "modifier": "secondary",
  "inverse": true
}
  • Content: 
    @use "../_layout/mixins";
.button {
  @include mixins.button();
}

.button--primary {
  @include mixins.buttonPrimary();
  &.button--inverse {
    @include mixins.buttonPrimary($inverse: true);
  }
}

.button--secondary {
  @include mixins.buttonSecondary();

  &.button--inverse {
    @include mixins.buttonSecondary($inverse: true);
  }
}

.button--small {
  @include mixins.buttonSmall();
}
.button--large {
  --button-size: var(--step-0);
}

.button--center {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

.button--wide {
  width: 100%;
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/components/button/button.scss
  • Size: 560 Bytes

No notes defined.