Badge

View Source

NOTE: Introduced feature in v0.2.0.

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

Badge is typically used to subtlely display to the user some type of ancillary information, relating to its siblings / parent UI elements.

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

<Badge>This is a Badge!</Badge>

Imports

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

Palette

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

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

<Stack.Container
    spacing="medium"
    orientation="horizontal"
    variation="wrap"
>
    <Badge>This is a DEFAULT Badge</Badge>

    <Badge palette="accent">
        This is a ACCENT Badge
    </Badge>

    <Badge palette="neutral">
        This is a NEUTRAL Badge
    </Badge>

    <Badge palette="dark">This is a DARK Badge</Badge>

    <Badge palette="light">
        This is a LIGHT Badge
    </Badge>

    <Badge palette="alert">
        This is a ALERT Badge
    </Badge>

    <Badge palette="affirmative">
        This is a AFFIRMATIVE Badge
    </Badge>

    <Badge palette="informative">
        This is a INFORMATIVE Badge
    </Badge>

    <Badge palette="negative">
        This is a NEGATIVE Badge
    </Badge>
</Stack.Container>

Radius

NOTE: Introduced feature in v0.6.0.

NOTE: By passing an array, you can set responsive values. e.g. radius={["tiny", "tablet:medium", "mobile:medium"]}

You can modify the border radius of the Badge via the radius property.

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

<Stack.Container
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <Badge palette="inverse">DEFAULT Badge</Badge>

    <Badge palette="inverse" radius="nano">
        NANO Badge
    </Badge>

    <Badge palette="inverse" radius="tiny">
        TINY Badge
    </Badge>

    <Badge palette="inverse" radius="small">
        SMALL Badge
    </Badge>

    <Badge palette="inverse" radius="medium">
        MEDIUM Badge
    </Badge>

    <Badge palette="inverse" radius="large">
        LARGE Badge
    </Badge>

    <Badge palette="inverse" radius="huge">
        HUGE Badge
    </Badge>

    <Badge palette="inverse" radius="massive">
        MASSIVE Badge
    </Badge>
</Stack.Container>

Shape

NOTE: Introduced feature in v0.6.0.

NOTE: By passing an array, you can set responsive values. e.g. shape={["circle", "tablet:pill", "mobile:pill"]}

You can modify the shape of the Badge via the shape property.

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

<Stack.Container
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <Badge palette="inverse">DEFAULT Badge</Badge>

    <Badge palette="inverse" shape="circle">
        CIRCLE Badge
    </Badge>

    <Badge palette="inverse" shape="pill">
        PILL Badge
    </Badge>
</Stack.Container>

Properties

Badge

Name Description Types
is Alters the HTML tag rendered to the DOM.
a button span (DEFAULT)
palette Alters the displayed color scheme.
auto inverse inherit accent neutral off dark light alert affirmative informative negative
radius Changes the border radius of the Badge.
none (DEFAULT) nano tiny small medium large huge massive {VIEWPORT}:{RADIUS}
shape Changes the shape of the Badge.
circle pill {VIEWPORT}:{SHAPE}
href Sets the web page being linked to, see MDN for more information.
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

Badge

Name Description Types
default Default unnamed slot.
{}