Anchor

View Source

NOTE: Introduced feature in v0.2.0.

Anchor are used for navigating from page to page, or to external websites.

<script>
    import {Anchor} from "@kahi-ui/framework";
</script>

<Anchor
    href="https://google.com"
    target="_blank"
    rel="noopener noreferrer"
>
    Goto google.com
</Anchor>

Imports

<script>
    import {Anchor} from "@kahi-ui/framework";
</script>

Internal Navigation

When navigating only to an internal Web Application route, you can just set href property with no other properties.

<script>
    import {Anchor} from "@kahi-ui/framework";
</script>

<Anchor href="#">Kahi UI</Anchor>

External Navigation

When navigating to external links, for security purposes it's recommended to set rel="noopener" to prevent Window.opener from being set on the newly opened page. And also to set rel="noreferrer" for privacy purposes, to prevent the Browser from sending the Referer header to the new page.

<script>
    import {Anchor} from "@kahi-ui/framework";
</script>

<Anchor
    href="https://google.com"
    target="_blank"
    rel="noopener noreferrer"
>
    Goto google.com
</Anchor>

States

You can control the state of the Anchor via the disabled property.

<script>
    import {Anchor} from "@kahi-ui/framework";
</script>

<Anchor
    href="https://google.com"
    target="_blank"
    rel="noopener noreferrer"
>
    Goto google.com DEFAULT
</Anchor>

<Anchor
    href="https://google.com"
    target="_blank"
    rel="noopener noreferrer"
    disabled
>
    Goto google.com DISABLED
</Anchor>

Palette

NOTE: Introduced feature in v0.4.3.

You can change the color palette of the Anchor via the palette property.

<script>
    import {Anchor, Stack} from "@kahi-ui/framework";
</script>

<Stack.Container
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <Anchor
        href="https://google.com"
        target="_blank"
        rel="noopener noreferrer"
    >
        Goto google.com DEFAULT
    </Anchor>

    <Anchor
        href="https://google.com"
        target="_blank"
        rel="noopener noreferrer"
        palette="accent"
    >
        Goto google.com ACCENT
    </Anchor>

    <Anchor
        href="https://google.com"
        target="_blank"
        rel="noopener noreferrer"
        palette="neutral"
    >
        Goto google.com NEUTRAL
    </Anchor>

    <Anchor
        href="https://google.com"
        target="_blank"
        rel="noopener noreferrer"
        palette="dark"
    >
        Goto google.com DARK
    </Anchor>

    <Anchor
        href="https://google.com"
        target="_blank"
        rel="noopener noreferrer"
        palette="light"
    >
        Goto google.com LIGHT
    </Anchor>

    <Anchor
        href="https://google.com"
        target="_blank"
        rel="noopener noreferrer"
        palette="alert"
    >
        Goto google.com ALERT
    </Anchor>

    <Anchor
        href="https://google.com"
        target="_blank"
        rel="noopener noreferrer"
        palette="affirmative"
    >
        Goto google.com AFFIRMATIVE
    </Anchor>

    <Anchor
        href="https://google.com"
        target="_blank"
        rel="noopener noreferrer"
        palette="informative"
    >
        Goto google.com INFORMATIVE
    </Anchor>

    <Anchor
        href="https://google.com"
        target="_blank"
        rel="noopener noreferrer"
        palette="negative"
    >
        Goto google.com NEGATIVE
    </Anchor>
</Stack.Container>

Properties

Anchor

Name Description Types
palette Alters the displayed color scheme.
auto inverse inherit accent neutral off dark light alert affirmative informative negative
current Changes the aria-current attribute, telling screen readers how to handle the link.
date location page step time true
disabled Changes the aria-disabled attribute, telling screen readers how to handle the link and altering it to be greyed-out.
boolean
href Changes the URL that Anchor navigates end-users to when clicked.
string
download If linking to a downloadable file, this property will be used as the suggested file name.
string
rel Sets how the Anchor relates to the current page, see MDN for more information.
string
target Sets the target of the Anchor being navigated, see MDN for more information.
string

Slots

Anchor

Name Description Types
default Default unnamed slot.
{}