<!-- Tertiary -->
<div class="mb-24" style="display:block">
    <h3>Tertiary Button</h3>
    <button class="btn btn--tertiary">Button</button>
    <button class="btn btn--sm btn--tertiary">Small Button</button>
    <button class="btn btn--xs btn--tertiary">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
    <h3>Tertiary Button with Leading Icon</h3>
    <button class="btn btn--tertiary icon--play">Button</button>
    <button class="btn btn--sm btn--tertiary icon--play">Small Button</button>
    <button class="btn btn--xs btn--tertiary icon--play">Extra Small Button</button>
</div>

<div class="mb-24" style="display:block">
    <h3>Tertiary Button with Trailing Icon</h3>
    <button class="btn btn--tertiary icon--link">Button</button>
    <button class="btn btn--sm btn--tertiary icon--link">Small Button</button>
    <button class="btn btn--xs btn--tertiary icon--link">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
    <h3>Tertiary Button Disabled</h3>
    <button class="btn btn--tertiary" disabled>Button</button>
    <button class="btn btn--sm btn--tertiary" disabled>Small Button</button>
    <button class="btn btn--xs btn--tertiary" disabled>Extra Small Button</button>
</div>

<!-- Tertiary (Dark Background)-->
<div class="has-background-ucla-blue has-white-text py-24">
    <div class="mb-24" style="display:block">
        <h3>Tertiary Dark Background Button</h3>
        <button class="btn btn--tertiary--darkbg">Button</button>
        <button class="btn btn--sm btn--tertiary--darkbg">Small Button</button>
        <button class="btn btn--xs btn--tertiary--darkbg">Extra Small Button</button>
    </div>
    <div class="mb-24" style="display:block">
        <h3>Tertiary Dark Background Button with Leading Icon</h3>
        <button class="btn btn--tertiary--darkbg icon--play">Button</button>
        <button class="btn btn--sm btn--tertiary--darkbg icon--play">Small Button</button>
        <button class="btn btn--xs btn--tertiary--darkbg icon--play">Extra Small Button</button>
    </div>
    <div class="mb-24" style="display:block">
        <h3>Tertiary Dark Background Button with Trailing Icon</h3>
        <button class="btn btn--tertiary--darkbg icon--link">Button</button>
        <button class="btn btn--sm btn--tertiary--darkbg icon--link">Small Button</button>
        <button class="btn btn--xs btn--tertiary--darkbg icon--link">Extra Small Button</button>
    </div>
    <div class="mb-24" style="display:block">
        <h3>Tertiary Dark Background Button Disabled</h3>
        <button class="btn btn--tertiary--darkbg" disabled>Button</button>
        <button class="btn btn--sm btn--tertiary--darkbg" disabled>Small Button</button>
        <button class="btn btn--xs btn--tertiary--darkbg" disabled>Extra Small Button</button>
    </div>
</div>
<!-- Tertiary -->
<div class="mb-24" style="display:block">
    <h3>Tertiary Button</h3>
    <button class="btn btn--tertiary">Button</button>
    <button class="btn btn--sm btn--tertiary">Small Button</button>
    <button class="btn btn--xs btn--tertiary">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
    <h3>Tertiary Button with Leading Icon</h3>
    <button class="btn btn--tertiary icon--play">Button</button>
    <button class="btn btn--sm btn--tertiary icon--play">Small Button</button>
    <button class="btn btn--xs btn--tertiary icon--play">Extra Small Button</button>
</div>

<div class="mb-24" style="display:block">
    <h3>Tertiary Button with Trailing Icon</h3>
    <button class="btn btn--tertiary icon--link">Button</button>
    <button class="btn btn--sm btn--tertiary icon--link">Small Button</button>
    <button class="btn btn--xs btn--tertiary icon--link">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
    <h3>Tertiary Button Disabled</h3>
    <button class="btn btn--tertiary" disabled>Button</button>
    <button class="btn btn--sm btn--tertiary" disabled>Small Button</button>
    <button class="btn btn--xs btn--tertiary" disabled>Extra Small Button</button>
</div>

<!-- Tertiary (Dark Background)-->
<div class="has-background-ucla-blue has-white-text py-24">
<div class="mb-24" style="display:block">
    <h3>Tertiary Dark Background Button</h3>
    <button class="btn btn--tertiary--darkbg">Button</button>
    <button class="btn btn--sm btn--tertiary--darkbg">Small Button</button>
    <button class="btn btn--xs btn--tertiary--darkbg">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
    <h3>Tertiary Dark Background Button with Leading Icon</h3>
    <button class="btn btn--tertiary--darkbg icon--play">Button</button>
    <button class="btn btn--sm btn--tertiary--darkbg icon--play">Small Button</button>
    <button class="btn btn--xs btn--tertiary--darkbg icon--play">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
    <h3>Tertiary Dark Background Button with Trailing Icon</h3>
    <button class="btn btn--tertiary--darkbg icon--link">Button</button>
    <button class="btn btn--sm btn--tertiary--darkbg icon--link">Small Button</button>
    <button class="btn btn--xs btn--tertiary--darkbg icon--link">Extra Small Button</button>
</div>
<div class="mb-24" style="display:block">
    <h3>Tertiary Dark Background Button Disabled</h3>
<button class="btn btn--tertiary--darkbg" disabled>Button</button>
<button class="btn btn--sm btn--tertiary--darkbg" disabled>Small Button</button>
<button class="btn btn--xs btn--tertiary--darkbg" disabled>Extra Small Button</button>
</div>
</div>
/* No context defined. */
  • Handle: @button--tertiary
  • Preview:
  • Filesystem Path: src/components/03-components/04-button/03-button--tertiary.hbs

No notes defined.