Button

View Source

NOTE: Introduced feature in v0.2.0.

Button is used to usually trigger an action in the Web Application, such as submitting forms or opening an Overlay.

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

<Button palette="accent">Click Me!</Button>

Imports

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

Palette

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

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

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

    <Button palette="accent">
        This is a ACCENT Button!
    </Button>

    <Button palette="neutral">
        This is a NEUTRAL Button!
    </Button>

    <Button palette="light">
        This is a LIGHT Button!
    </Button>

    <Button palette="dark">
        This is a DARK Button!
    </Button>

    <Button palette="alert">
        This is a ALERT Button!
    </Button>

    <Button palette="affirmative">
        This is a AFFIRMATIVE Button!
    </Button>

    <Button palette="informative">
        This is a INFORMATIVE Button!
    </Button>

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

Clear

Button components have a special variation that renders as text with no background, that lightly fills in when clicked.

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

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

    <Button variation="clear" palette="accent">
        This is a ACCENT Button!
    </Button>

    <Button variation="clear" palette="neutral">
        This is a NEUTRAL Button!
    </Button>

    <Button variation="clear" palette="light">
        This is a LIGHT Button!
    </Button>

    <Button variation="clear" palette="dark">
        This is a DARK Button!
    </Button>

    <Button variation="clear" palette="alert">
        This is a ALERT Button!
    </Button>

    <Button variation="clear" palette="affirmative">
        This is a AFFIRMATIVE Button!
    </Button>

    <Button variation="clear" palette="informative">
        This is a INFORMATIVE Button!
    </Button>

    <Button variation="clear" palette="negative">
        This is a NEGATIVE Button!
    </Button>
</Stack.Container>

Outline

Button components have a special variation that renders them as text with an outline, the fills in when clicked.

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

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

    <Button variation="outline" palette="accent">
        This is a ACCENT Button!
    </Button>

    <Button variation="outline" palette="neutral">
        This is a NEUTRAL Button!
    </Button>

    <Button variation="outline" palette="light">
        This is a LIGHT Button!
    </Button>

    <Button variation="outline" palette="dark">
        This is a DARK Button!
    </Button>

    <Button variation="outline" palette="alert">
        This is a ALERT Button!
    </Button>

    <Button variation="outline" palette="affirmative">
        This is a AFFIRMATIVE Button!
    </Button>

    <Button variation="outline" palette="informative">
        This is a INFORMATIVE Button!
    </Button>

    <Button variation="outline" palette="negative">
        This is a NEGATIVE Button!
    </Button>
</Stack.Container>

Subtle

NOTE: Introduced feature in v0.5.1.

You can alter the Button Component to use less intense / remove "attention grabbing" animations via the variation property.

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

<Stack.Container
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <Button palette="inverse" variation="subtle">
        This is a SUBTLE BLOCK Button!
    </Button>

    <Button
        palette="inverse"
        variation={["subtle", "clear"]}
    >
        This is a CLEAR OUTLINE Button!
    </Button>

    <Button
        palette="inverse"
        variation={["subtle", "outline"]}
    >
        This is a SUBTLE OUTLINE Button!
    </Button>
</Stack.Container>

States

You can control the state of the Button via the active and disabled properties.

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

<Text is="strong">DEFAULT</Text>
<Stack.Container
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <Button>DEFAULT</Button>
    <Button disabled>DISABLED INACTIVE</Button>
    <Button active>ACTIVE</Button>
    <Button active disabled>DISABLED ACTIVE</Button>
</Stack.Container>

<Text is="strong">OUTLINE</Text>
<Stack.Container
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <Button variation="outline">DEFAULT</Button>
    <Button variation="outline" disabled>
        DISABLED INACTIVE
    </Button>

    <Button variation="outline" active>ACTIVE</Button>
    <Button variation="outline" active disabled>
        DISABLED ACTIVE
    </Button>
</Stack.Container>

<Text is="strong">CLEAR</Text>
<Stack.Container
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <Button variation="clear">DEFAULT</Button>
    <Button variation="clear" disabled>
        DISABLED INACTIVE
    </Button>
    <Button variation="clear" active>ACTIVE</Button>
    <Button variation="clear" active disabled>
        DISABLED ACTIVE
    </Button>
</Stack.Container>

Sizing

WARNING: This feature was renamed from size to sizing in v0.6.0.

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

You can change the size of the Button via the sizing property.

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

<Stack.Container
    orientation="horizontal"
    alignment_y="top"
    spacing="medium"
    variation="wrap"
>
    <Button>This is a DEFAULT Button!</Button>

    <Button sizing="nano">
        This is a NANO Button!
    </Button>

    <Button sizing="tiny">
        This is a TINY Button!
    </Button>

    <Button sizing="small">
        This is a SMALL Button!
    </Button>

    <Button sizing="medium">
        This is a MEDIUM Button!
    </Button>

    <Button sizing="large">
        This is a LARGE Button!
    </Button>

    <Button sizing="huge">
        This is a HUGE Button!
    </Button>

    <Button sizing="massive">
        This is a MASSIVE Button!
    </Button>
</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 change the border radius of the Button via the radius property.

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

<Stack.Container
    orientation="horizontal"
    alignment_y="top"
    spacing="medium"
    variation="wrap"
>
    <Button>This is a DEFAULT Button!</Button>

    <Button radius="none">
        This is a NONE Button!
    </Button>

    <Button radius="nano">
        This is a NANO Button!
    </Button>

    <Button radius="tiny">
        This is a TINY Button!
    </Button>

    <Button radius="small">
        This is a SMALL Button!
    </Button>

    <Button radius="medium">
        This is a MEDIUM Button!
    </Button>

    <Button radius="large">
        This is a LARGE Button!
    </Button>

    <Button radius="huge">
        This is a HUGE Button!
    </Button>

    <Button radius="massive">
        This is a MASSIVE Button!
    </Button>
</Stack.Container>

Shapes

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 change the shape of the Button via the shape property.

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

<Stack.Container
    orientation="horizontal"
    alignment_y="top"
    spacing="medium"
    variation="wrap"
>
    <Button>This is a DEFAULT Button!</Button>

    <Button shape="circle">
        This is a CIRCLE Button!
    </Button>

    <Button shape="pill">
        This is a PILL Button!
    </Button>
</Stack.Container>

Elements

WARNING: This feature was updated to require explicit is property in v0.6.0.

You can alter the HTML element tag rendered to DOM via the is property to render things like links and form buttons.

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

<Check id="button-types-label" />

<Stack.Container
    alignment_y="top"
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <Button>This is a DEFAULT Button!</Button>

    <Button
        is="a"
        href="https://google.com"
        target="_blank"
        rel="noopener noreferrer"
    >
        This is an ANCHOR Button!
    </Button>

    <Button is="label" for="button-types-label">
        This is a LABEL Button!
    </Button>

    <Button
        is="input"
        value="This is an INPUT Button!"
    />

    <Button
        is="input"
        type="submit"
        value="This is a SUBMIT Button!"
    />

    <Button
        is="input"
        type="reset"
        value="This is a RESET Button!"
    />
</Stack.Container>

Properties

Button

Name Description Types
is Alters the HTML tag rendered to the DOM.
a button (DEFAULT) input label
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 Button.
none (DEFAULT) nano tiny small medium large huge massive {VIEWPORT}:{RADIUS}
shape Changes the shape of the Button.
circle pill {VIEWPORT}:{SHAPE}
sizing Renders the Button at a different sizes.
nano tiny small medium large huge massive {VIEWPORT}:{SIZING}
variation Changes the how the Button is rendered.
clear outline subtle ["subtle", "clear" | "outline"]
active Renders the Button with aria-pressed attribute, and styles the Button as if it where being clicked.
boolean
disabled Renders the Button with disabled / aria-disabled attributes, and styles the Button partially transparent.
boolean
name Sets the form name of the Button whenever Button.type is set.
string
type Renders the Button as a as a specific form type.
button reset submit
value Sets the form value of the Button whenever Button.type is set.
string
download If linking to a downloadable file, this property will be used as the suggested file name.
string
href Renders the Button as a and links to the specified href property.
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
for Renders the Button as a
string

Slots

Button

Name Description Types
default Default unnamed slot.
{}