Button

Common operation buttons.

Basic usage

Use type, plain,round and circle to define style.

<template>
    <div class="kl-4">
        <kl-button>Default</kl-button>
        <kl-button type="primary">Primary</kl-button>
        <kl-button type="success">Success</kl-button>
        <kl-button type="info">Info</kl-button>
        <kl-button type="warning">Warning</kl-button>
        <kl-button type="danger">Danger</kl-button>
    </div>
    <div class="kl-4">
        <kl-button plain>Default</kl-button>
        <kl-button type="primary" plain>Primary</kl-button>
        <kl-button type="success" plain>Success</kl-button>
        <kl-button type="info" plain>Info</kl-button>
        <kl-button type="warning" plain>Warning</kl-button>
        <kl-button type="danger" plain>Danger</kl-button>
    </div>
    <div class="kl-4">
        <kl-button round>Default</kl-button>
        <kl-button type="primary" round>Primary</kl-button>
        <kl-button type="success" round>Success</kl-button>
        <kl-button type="info" round>Info</kl-button>
        <kl-button type="warning" round>Warning</kl-button>
        <kl-button type="danger" round>Danger</kl-button>
    </div>
    <div class="kl-4">
        <kl-button circle :icon="KlSystemEdit"></kl-button>
        <kl-button type="primary" circle :icon="KlSystemDelete"></kl-button>
        <kl-button type="success" circle :icon="KlSystemSearch"></kl-button>
        <kl-button type="info" circle :icon="KlSystemLoad"></kl-button>
        <kl-button type="warning" circle :icon="KlMediaCameraLine"></kl-button>
        <kl-button type="danger" circle :icon="KlMediaDiscFill"></kl-button>
    </div>
</template>

<script setup lang="ts">
import {
    KlSystemEdit,
    KlSystemDelete,
    KlSystemSearch,
    KlSystemLoad,
    KlMediaCameraLine,
    KlMediaDiscFill
} from '@kl-design/icons'
</script>

<style scoped lang="scss">
.kl-4 {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    & > button {
        margin-bottom: 10px;
    }
}
</style>

Disable status

You can use the disabled property to define whether the button is disabled

Use the disabled attribute to control whether the button is disabled. This property accepts a value of type Boolean.

<template>
    <div class="kl-4">
        <kl-button disabled>Default</kl-button>
        <kl-button type="primary" disabled>Primary</kl-button>
        <kl-button type="success" disabled>Success</kl-button>
        <kl-button type="info" disabled>Info</kl-button>
        <kl-button type="warning" disabled>Warning</kl-button>
        <kl-button type="danger" disabled>Danger</kl-button>
    </div>
    <div class="kl-4">
        <kl-button plain disabled>plain</kl-button>
        <kl-button type="primary" plain disabled>Primary</kl-button>
        <kl-button type="success" plain disabled>Success</kl-button>
        <kl-button type="info" plain disabled>Info</kl-button>
        <kl-button type="warning" plain disabled>Warning</kl-button>
        <kl-button type="danger" plain disabled>Danger</kl-button>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.kl-4 {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    & > button {
        margin-bottom: 10px;
    }
}
</style>

Link

You can use the link attribute to define whether a button is a link button.

Use the link attribute to control whether the button is a link button. This property accepts a value of type Boolean.

<template>
    <div>
        <kl-button v-for="item in link_button" :key="item.text" :type="item.type" link>{{
            item.text
        }}</kl-button
        ><br />
        <kl-button v-for="item in link_button" :key="item.text" :type="item.type" disabled link>{{
            item.text
        }}</kl-button>
    </div>
</template>

<script setup lang="ts">
const link_button = [
    { type: null, text: 'default' },
    { type: 'primary', text: 'primary' },
    { type: 'success', text: 'success' },
    { type: 'danger', text: 'danger' },
    { type: 'info', text: 'info' }
] as const
</script>

<style scoped lang="scss">
button {
    margin: 5px;
}
</style>

Text

Buttons with no border or background color.

Use the text property to control whether the button is a text button. This property accepts a value of type Boolean.

<template>
    <div>
        <kl-button v-for="item in link_button" :key="item.text" :type="item.type" text>{{
            item.text
        }}</kl-button
        ><br />
        <kl-button v-for="item in link_button" :key="item.text" :type="item.type" text bg>{{
            item.text
        }}</kl-button
        ><br />
        <kl-button
            v-for="item in link_button"
            :key="item.text"
            :type="item.type"
            link
            text
            bg
            disabled
            >{{ item.text }}</kl-button
        >
    </div>
</template>

<script setup lang="ts">
const link_button = [
    { type: null, text: 'default' },
    { type: 'primary', text: 'primary' },
    { type: 'success', text: 'success' },
    { type: 'danger', text: 'danger' },
    { type: 'info', text: 'info' }
] as const
</script>

<style scoped>
button {
    margin: 5px;
}
</style>

Resize

In addition to the default strip, the button component is available in several additional sizes for different scenarios.

Use the size attribute to configure additional dimensions, with five values available: mini, small, normal, large and xlarge.

<template>
    <div class="kl-4">
        <kl-button size="mini">Primary</kl-button>
        <kl-button size="small">Success</kl-button>
        <kl-button size="normal">Info</kl-button>
        <kl-button size="large">Warning</kl-button>
        <kl-button size="xlarge">Danger</kl-button>
    </div>
    <div class="kl-4">
        <kl-button round size="mini">mini</kl-button>
        <kl-button round size="small">small</kl-button>
        <kl-button round size="normal">normal</kl-button>
        <kl-button round size="large">large</kl-button>
        <kl-button round size="xlarge">xlarge</kl-button>
    </div>
    <div class="kl-4">
        <kl-button circle :icon="KlSystemEdit" size="mini"></kl-button>
        <kl-button type="primary" circle :icon="KlSystemEdit" size="small"></kl-button>
        <kl-button type="success" circle :icon="KlSystemEdit" size="normal"></kl-button>
        <kl-button type="info" circle :icon="KlSystemEdit" size="large"></kl-button>
        <kl-button type="warning" circle :icon="KlSystemEdit" size="xlarge"></kl-button>
    </div>
</template>

<script setup lang="ts">
import { KlSystemEdit } from '@kl-design/icons'
</script>

<style scoped lang="scss">
.kl-4 {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    & > button {
        margin-bottom: 10px;
    }
}
</style>

Attribute

attribute	description	type	optional	default
type	Button type	string	primary\|info\|success\|warning\|danger\|default	default
size	Button size	string	mini\|small\|normal\|large\|xlarge	normal
color	Button background color	string
textColor	Button text color	string
round	Rounded or not	boolean		false
plain	Solid color button	boolean		false
circle	round	boolean		false
disabled	Disable button	boolean		false
link	Link button	boolean		false
text	Text button	boolean		false
bg	Whether to display background in text button mode	boolean		false
icon	Font icon	object

Button #

Basic usage #

Disable status #

Link #

Text #

Resize #

Attribute #