Anchor Button
Usage notes
Anchor buttons are simply buttons behaving as anchors.
Default
Toggle markup
<a is="coral-anchorbutton" href="#">Default</a>
Quiet
Toggle markup
<a is="coral-anchorbutton" href="#" variant="quiet">Quiet</a>
CTA
Toggle markup
<a is="coral-anchorbutton" href="#" variant="cta" style="max-width:168px">Informationen über Creative Cloud</a>
Secondary
Toggle markup
<a is="coral-anchorbutton" href="#" variant="secondary">Secondary</a>
Quiet Secondary
Toggle markup
<a is="coral-anchorbutton" href="#" variant="quietsecondary">Quiet Secondary</a>
Warning
Toggle markup
<a is="coral-anchorbutton" href="#" variant="warning">Warning</a>
Quiet Warning
Toggle markup
<a is="coral-anchorbutton" href="#" variant="quietwarning">Quiet Warning</a>
Over Background button
Toggle markup
<div class="u-coral-padding" style="background-color: rgb(15, 121, 125); display: inline-block;">
<a is="coral-anchorbutton" href="#" variant="overbackground">Over Background</a>
</div>
Action button
Toggle markup
<a is="coral-anchorbutton" href="#" variant="action">Action</a>
<a is="coral-anchorbutton" href="#" variant="action" icon="edit">Action with icon</a>
<a is="coral-anchorbutton" href="#" variant="action" selected="">Selected Action</a>
Quiet Action button
Toggle markup
<a is="coral-anchorbutton" href="#" variant="quietaction">Quiet Action</a>
<a is="coral-anchorbutton" href="#" variant="quietaction" icon="edit">Quiet Action with icon</a>
<a is="coral-anchorbutton" href="#" variant="quietaction" selected="">Selected Quiet Action</a>
Minimal button
Toggle markup
<a is="coral-anchorbutton" href="#" variant="minimal">Minimal</a>
Disabled button
Toggle markup
<a is="coral-anchorbutton" href="#" disabled="">Disabled</a>
Icon button
Toggle markup
<a is="coral-anchorbutton" aria-label="home" href="#" icon="home"> </a>
<a is="coral-anchorbutton" href="#" icon="home" iconposition="left">With Icon</a>
<a is="coral-anchorbutton" href="#" icon="home" iconposition="right">With Icon</a>
Image button
Toggle markup
<a is="coral-anchorbutton" aria-label="placeholder" href="#" icon="http://via.placeholder.com/64x64"> </a>
<a is="coral-anchorbutton" href="#" icon="http://via.placeholder.com/64x64" iconposition="left">With Image</a>
<a is="coral-anchorbutton" href="#" icon="http://via.placeholder.com/64x64" iconposition="right">With Image</a>
Block button
Toggle markup
<a is="coral-anchorbutton" href="#" block="" style="max-width:400px">Block Button</a>