Button Cta Highlight

No notes defined.

<!-- Default -->
<button type="button" class="sds-btn -btnCta -btnCtaHighlight">

    <span class="sds-btn__text">button text</span>

</button>

<!-- Full Width -->
<button type="button" class="sds-btn -btnCta -btnCtaHighlight -block">

    <span class="sds-btn__text">button text</span>

</button>

<!-- Icon Left -->
<button type="button" class="sds-btn -btnCta -btnCtaHighlight">

    <span class="sds-icon sds-icon-adviser"></span>

    <span class="sds-btn__text">button text</span>

</button>

<!-- Icon Right -->
<button type="button" class="sds-btn -btnCta -btnCtaHighlight">

    <span class="sds-btn__text">button text</span>

    <span class="sds-icon sds-icon-adviser"></span>

</button>

<!-- Disabled -->
<button type="button" class="sds-btn -btnCta -btnCtaHighlight -isDisabled" disabled>

    <span class="sds-btn__text">button text</span>

</button>

<!-- Icon Left Disabled -->
<button type="button" class="sds-btn -btnCta -btnCtaHighlight -isDisabled" disabled>

    <span class="sds-icon sds-icon-adviser"></span>

    <span class="sds-btn__text">button text</span>

</button>

<!-- Icon Right Disabled -->
<button type="button" class="sds-btn -btnCta -btnCtaHighlight -isDisabled" disabled>

    <span class="sds-btn__text">button text</span>

    <span class="sds-icon sds-icon-adviser"></span>

</button>

<!-- Big -->
<button type="button" class="sds-btn -btnCta -btnCtaHighlight -btnBig">

    <span class="sds-btn__text">button text</span>

</button>

<!-- Big Icon Left -->
<button type="button" class="sds-btn -btnCta -btnCtaHighlight -btnBig">

    <span class="sds-icon sds-icon-adviser"></span>

    <span class="sds-btn__text">button text</span>

</button>

<!-- Big Icon Right -->
<button type="button" class="sds-btn -btnCta -btnCtaHighlight -btnBig">

    <span class="sds-btn__text">button text</span>

    <span class="sds-icon sds-icon-adviser"></span>

</button>

<!-- Big Disabled -->
<button type="button" class="sds-btn -btnCta -btnCtaHighlight -btnBig -isDisabled" disabled>

    <span class="sds-btn__text">button text</span>

</button>

<!-- Big Icon Left Disabled -->
<button type="button" class="sds-btn -btnCta -btnCtaHighlight -btnBig -isDisabled" disabled>

    <span class="sds-icon sds-icon-adviser"></span>

    <span class="sds-btn__text">button text</span>

</button>

<!-- Big Icon Right Disabled -->
<button type="button" class="sds-btn -btnCta -btnCtaHighlight -btnBig -isDisabled" disabled>

    <span class="sds-btn__text">button text</span>

    <span class="sds-icon sds-icon-adviser"></span>

</button>

<!-- Small -->
<button type="button" class="sds-btn -btnCta -btnCtaHighlight -btnSmall">

    <span class="sds-btn__text">button text</span>

</button>

<!-- Small Disabled -->
<button type="button" class="sds-btn -btnCta -btnCtaHighlight -btnSmall -isDisabled" disabled>

    <span class="sds-btn__text">button text</span>

</button>

{% include "@button" %}