Link

Styling for the a tag. Tags without the ws-x attribute won't be styled, while the attribute with no functions will still style it. Links can be presented as link buttons by adding the @@button wind function.

Markers

@button

Makes the anchor look and feel like a button.

Component Macros

$outline or $fill (with @@button only)
$color

Preview

Preview Theme

Example

<ws-grid ws-x="[gr.cols 1fr 1fr 1fr]">
    <div ws-x="[col span 3]">Regular Links (with colors)</div>
    <a href="#" ws-x>Default</a>
    <a href="#" ws-x="[$color @primary]">Primary</a>
    <a href="#" ws-x="[$color @secondary]">Secondary</a>
    <a href="#" ws-x="[$color @danger]">Danger</a>
    <a href="#" ws-x="[$color @warning]">Warning</a>
    <a href="#" ws-x="[$color @accent]">Accent</a>

    <div ws-x="[col span 3]">Button Links (with colors)</div>
    <a href="#" ws-x="@@button">Default</a>
    <a href="#" ws-x="@@button [$outline]">Default</a>
    <a href="#" ws-x="@@button [$fill]">Default</a>
    <a href="#" disabled ws-x="@@button">Default</a>
    <a href="#" disabled ws-x="@@button [$outline]">Default</a>
    <a href="#" disabled ws-x="@@button [$fill]">Default</a>

    <a href="#" ws-x="@@button [$color @primary]">Primary</a>
    <a href="#" ws-x="@@button [$color @primary] [$outline]">Primary</a>
    <a href="#" ws-x="@@button [$color @primary] [$fill]">Primary</a>
    <a href="#" disabled ws-x="@@button [$color @primary]">Primary</a>
    <a href="#" disabled ws-x="@@button [$color @primary] [$outline]">Primary</a>
    <a href="#" disabled ws-x="@@button [$color @primary] [$fill]">Primary</a>

    <a href="#" ws-x="@@button [$color @secondary]">Secondary</a>
    <a href="#" ws-x="@@button [$color @secondary] [$outline]">Secondary</a>
    <a href="#" ws-x="@@button [$color @secondary] [$fill]">Secondary</a>
    <a href="#" disabled ws-x="@@button [$color @secondary]">Secondary</a>
    <a href="#" disabled ws-x="@@button [$color @secondary] [$outline]">Secondary</a>
    <a href="#" disabled ws-x="@@button [$color @secondary] [$fill]">Secondary</a>

    <a href="#" ws-x="@@button [$color @danger]">Danger</a>
    <a href="#" ws-x="@@button [$color @danger] [$outline]">Danger</a>
    <a href="#" ws-x="@@button [$color @danger] [$fill]">Danger</a>
    <a href="#" disabled ws-x="@@button [$color @danger]">Danger</a>
    <a href="#" disabled ws-x="@@button [$color @danger] [$outline]">Danger</a>
    <a href="#" disabled ws-x="@@button [$color @danger] [$fill]">Danger</a>

    <a href="#" ws-x="@@button [$color @warning]">Warning</a>
    <a href="#" ws-x="@@button [$color @warning] [$outline]">Warning</a>
    <a href="#" ws-x="@@button [$color @warning] [$fill]">Warning</a>
    <a href="#" disabled ws-x="@@button [$color @warning]">Warning</a>
    <a href="#" disabled ws-x="@@button [$color @warning] [$outline]">Warning</a>
    <a href="#" disabled ws-x="@@button [$color @warning] [$fill]">Warning</a>

    <a href="#" ws-x="@@button [$color @accent]">Accent</a>
    <a href="#" ws-x="@@button [$color @accent] [$outline]">Accent</a>
    <a href="#" ws-x="@@button [$color @accent] [$fill]">Accent</a>
    <a href="#" disabled ws-x="@@button [$color @accent]">Accent</a>
    <a href="#" disabled ws-x="@@button [$color @accent] [$outline]">Accent</a>
    <a href="#" disabled ws-x="@@button [$color @accent] [$fill]">Accent</a>
</ws-grid>