University of Florida College of the Arts Pattern Library

Button: Secondary Button 

<a href="#" class="standard-button standard-button--light
            standard-button---width standard-button--secondary">
    <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Take action</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <mask id="mask0_5509_8875" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
                        <rect width="24" height="24" fill="#D9D9D9" />
                    </mask>
                    <g mask="url(#mask0_5509_8875)">
                        <path d="M16.175 13H4V11H16.175L10.575 5.4L12 4L20 12L12 20L10.575 18.6L16.175 13Z" fill="white" />
                    </g>
                </svg></span></span></div>
</a>
 
{% set newTab = button.isDownload %}

{% if button.isButton | default %}
    <button type="{{ button.buttonType | default }}"
        {% if button.id | default %} id="{{ button.id }}"{% endif %}
        {% if button.isDisabled | default %} disabled="disabled" aria-disabled="true"{% endif %}
            class="standard-button standard-button--{{ background }}
            standard-button--{{ button.width }}-width standard-button--{{ button.type }}
            {% if button.size %} standard-button--{{ button.size }}{% else %} standard-button--lg{% endif %}"
        {% if button.accessibleLabel | default %}
            aria-label="{{ button.accessibleLabel }}"
        {% endif %}
    >
        {% apply spaceless %}
            <div class="standard-button__container">
                <span class="standard-button__text-container">
                    <span class="standard-button__text">{{ button.text | trim }}</span>
                        {% if button.type != 'tertiary' %}
                            <span class="standard-button__icon">{% include "bits/icons/right-arrow.twig" %}</span>
                        {% else %}
                            <span class="standard-button__underline"></span>
                        {% endif %}
                </span>
            </div>
        {% endapply %}
    </button>
{% else %}
    <a href="{{ button.url }}"
       class="standard-button standard-button--{{ background }}
            standard-button--{{ button.width }}-width standard-button--{{ button.type }}"
        {% if button.accessibleLabel | default %}
            aria-label="{{ button.accessibleLabel }}"
        {% endif %}
        {% if newTab %} target="_blank" {% endif %}>
        {% apply spaceless %}
            <div class="standard-button__container">
                <span class="standard-button__text-container">
                    <span class="standard-button__text">{{ button.text | trim }}</span>
                    {% if button.type != 'reset' %}
                        {% if button.type != 'tertiary' %}
                            <span class="standard-button__icon">{% include "bits/icons/right-arrow.twig" %}</span>
                        {% else %}
                            <span class="standard-button__underline"></span>
                        {% endif %}
                    {% endif %}
                </span>
            </div>
        {% endapply %}
    </a>
{% endif %}
 
{
  "button": {
    "text": "Take action",
    "url": "#",
    "isDisabled": false,
    "type": "secondary",
    "size": "lg"
  },
  "background": "light"
}
  • Content: 
    .standard-button

    &--light&--primary
        --standardButtonBackgroundColor blue500
        --standardButtonBackgroundColorActive black
        --standardButtonBackgroundColorDisabled grey100
        --standardButtonBorderRadius 4px
        --standardButtonIconFillColor white
        --standardButtonIconFillColorActive white
        --standardButtonIconFillColorDisabled grey300
        --standardButtonOutlineBorder none
        --standardButtonOutlineBorderActive none
        --standardButtonPadding 16px 24px
        --standardButtonPaddingSmall 8px 12px
        --standardButtonTextColor white
        --standardButtonTextColorActive white
        --standardButtonTextColorDisabled grey300
        --textDecoration none
        --verticalAlign middle

    &--dark&--primary
        --standardButtonBackgroundColor white
        --standardButtonBackgroundColorActive white
        --standardButtonBackgroundColorDisabled grey200
        --standardButtonBorderRadius 4px
        --standardButtonIconFillColor blue500
        --standardButtonIconFillColorActive blue500
        --standardButtonIconFillColorDisabled grey300
        --standardButtonOutlineBorder none
        --standardButtonOutlineBorderActive none
        --standardButtonPadding 16px 24px
        --standardButtonPaddingSmall 8px 12px
        --standardButtonTextColor blue500
        --standardButtonTextColorActive blue500
        --standardButtonTextColorDisabled grey300
        --textDecoration none
        --verticalAlign middle

    &--light&--secondary
        --standardButtonBackgroundColor white
        --standardButtonBackgroundColorActive white
        --standardButtonBackgroundColorDisabled white
        --standardButtonBorderRadius 4px
        --standardButtonIconFillColor blue500
        --standardButtonIconFillColorActive blue500
        --standardButtonIconFillColorDisabled grey100
        --standardButtonOutlineBorder 2px solid orange
        --standardButtonOutlineBorderActive 2px solid orange
        --standardButtonOutlineBorderDisabled 2px solid grey100
        --standardButtonPadding 16px 24px
        --standardButtonPaddingSmall 8px 12px
        --standardButtonTextColor blue500
        --standardButtonTextColorActive blue500
        --standardButtonTextColorDisabled grey100
        --textDecoration none
        --verticalAlign text-top

    &--dark&--secondary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive transparent
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 4px
        --standardButtonIconFillColor white
        --standardButtonIconFillColorActive white
        --standardButtonIconFillColorDisabled grey100
        --standardButtonOutlineBorder 2px solid orange
        --standardButtonOutlineBorderActive 2px solid orange
        --standardButtonOutlineBorderDisabled 2px solid grey200
        --standardButtonPadding 16px 24px
        --standardButtonPaddingSmall 8px 12px
        --standardButtonTextColor white
        --standardButtonTextColorActive white
        --standardButtonTextColorDisabled grey200
        --textDecoration none
        --verticalAlign text-top

    &--light&--tertiary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive transparent
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 4px
        --standardButtonIconFillColor transparent
        --standardButtonIconFillColorActive transparent
        --standardButtonIconFillColorDisabled transparent
        --standardButtonOutlineBorder none
        --standardButtonOutlineBorderActive none
        --standardButtonOutlineBorderDisabled none
        --standardButtonPadding 0
        --standardButtonPaddingSmall 0
        --standardButtonTextColor blue500
        --standardButtonTextColorActive blue500
        --standardButtonTextColorDisabled blue500
        --textDecoration none
        --verticalAlign middle
        --whiteSpace nowrap

    &--dark&--tertiary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive transparent
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 4px
        --standardButtonIconFillColor transparent
        --standardButtonIconFillColorActive transparent
        --standardButtonIconFillColorDisabled transparent
        --standardButtonOutlineBorder none
        --standardButtonOutlineBorderActive none
        --standardButtonOutlineBorderDisabled none
        --standardButtonPadding 0
        --standardButtonPaddingSmall 0
        --standardButtonTextColor blue500
        --standardButtonTextColorActive blue500
        --standardButtonTextColorDisabled blue500
        --textDecoration none
        --verticalAlign middle
        --whiteSpace nowrap

    &--light&--reset
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive transparent
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 0
        --standardButtonIconFillColor transparent
        --standardButtonIconFillColorActive transparent
        --standardButtonIconFillColorDisabled transparent
        --standardButtonOutlineBorder none
        --standardButtonOutlineBorderActive none
        --standardButtonOutlineBorderDisabled none
        --standardButtonPadding 0
        --standardButtonPaddingSmall 0
        --standardButtonTextColor blue500
        --standardButtonTextColorActive black
        --standardButtonTextColorDisabled blue500
        --textDecoration underline
        --verticalAlign baseline

    &--lg&--light&--primary
        --standardButtonPadding 16px 24px
    &--sm&--light&--primary
        --standardButtonPadding 12px 16px
        --verticalAlign middle

    align-items center
    background-color var(--standardButtonBackgroundColor)
    border var(--standardButtonOutlineBorder)
    border-radius var(--standardButtonBorderRadius)
    color var(--standardButtonTextColor) !important
    display inline-block
    padding var(--standardButtonPaddingSmall)
    text-align center
    text-decoration var(--textDecoration)
    text-underline-offset 4px
    transition all 0.3s ease

    +above(breakpointHeaderMedium)
        padding var(--standardButtonPadding)

    &:hover
    &:focus
        background var(--standardButtonBackgroundColorActive)
        border var(--standardButtonOutlineBorderActive)

    &:hover &__icon svg
    &:focus &__icon svg
        transform translateX(4px)

    &:hover &__icon > svg > path
    &:focus &__icon > svg > path
        fill var(--standardButtonIconFillColorActive)

    &:hover &__text
    &:focus &__text
        color var(--standardButtonTextColorActive)

    &:hover &__underline:before
    &:focus &__underline:before
       width 100%

    &--cta-component
        padding 10px 24px

    &--full-width
        width 100%

    &--full-width &__container
        justify-content center

    &__container
        display flex

    &__text-container
        align-items center
        bottom -1px
        display flex
        position relative

    &__text
    &.tenup-block-components-link__label /* Block Editor override */
        @extends $headline5
        color var(--standardButtonTextColor)
        margin-right 16px
        position relative
        text-decoration none
        display inline-block
        white-space var(--whiteSpace, inherit)

        &:first-child:last-child
            margin-right 0

    &--cta-component &__text
        font-size responsive 20px 24px

    &__icon
        display inline
        margin-left -8px
        position relative
        line-height 10px
        white-space nowrap

        & svg
            width 24px
            transition all 0.3s ease

            & path
                fill var(--standardButtonIconFillColor)

    &--reset
        display flex

    &__underline
        border-bottom 1px solid orange
        bottom -4px
        left 0
        position absolute
        right 16px
        top 0

        &:before
            background-color orange
            bottom -2px
            content ""
            left 0
            height 3px
            position absolute
            width 3px
            transition width 0.3s ease

    &[disabled]
        background-color var(--standardButtonBackgroundColorDisabled)
        border var(--standardButtonOutlineBorderDisabled)

    &[disabled]:hover
    &[disabled]:focus
        background-color var(--standardButtonBackgroundColorDisabled)

    &[disabled]:hover &__icon svg
    &[disabled]:focus &__icon svg
        transform translateX(0)

    &[disabled]:hover &__icon > svg > path
    &[disabled]:focus &__icon > svg > path
        fill var(--standardButtonIconFillColorDisabled)

    &[disabled]:hover &__text
    &[disabled]:focus &__text
        color var(--standardButtonTextColorDisabled)

    &[disabled]  &__text
        color var(--standardButtonTextColorDisabled)

    &[disabled] &__icon

        & svg
            & path
                fill var(--standardButtonIconFillColorDisabled)
  • URL: /components/raw/standard-button/standard-button.styl
  • Filesystem Path: patterns/bits/standard-button/standard-button.styl
  • Size: 9.2 KB

No notes defined.