Dot

NOTE: Introduced feature in v0.2.0.

WARNING: This feature received a breaking change in v0.6.0.

Dot is typically used for calling out other UI elements to the end-user, that they need attention.

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

<Dot />

Imports

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

Palette

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

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

<Stack.Container
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <div>
        <Text is="strong">DEFAULT</Text>
        <br />
        <Dot />
    </div>

    <div>
        <Text is="strong">ACCENT</Text>
        <br />
        <Dot palette="accent" />
    </div>

    <div>
        <Text is="strong">NEUTRAL</Text>
        <br />
        <Dot palette="neutral" />
    </div>

    <div>
        <Text is="strong">DARK</Text>
        <br />
        <Dot palette="dark" />
    </div>

    <div>
        <Text is="strong">LIGHT</Text>
        <br />
        <Dot palette="light" />
    </div>

    <div>
        <Text is="strong">ALERT</Text>
        <br />
        <Dot palette="alert" />
    </div>

    <div>
        <Text is="strong">AFFIRMATIVE</Text>
        <br />
        <Dot palette="affirmative" />
    </div>

    <div>
        <Text is="strong">INFORMATIVE</Text>
        <br />
        <Dot palette="informative" />
    </div>

    <div>
        <Text is="strong">NEGATIVE</Text>
        <br />
        <Dot palette="negative" />
    </div>
</Stack.Container>