<template>
    <lk-content>
        <h1>Badge</h1>
        <p>The badge component (<code>lk-badge</code>)&hellip;</p>
        <lk-panel>
            <lk-panel-body padding-bottom>
                <lk-badge>Default</lk-badge>
                <lk-badge inverse>Inverse</lk-badge>
                <lk-badge primary>Primary</lk-badge>
                <lk-badge 
                    inverse 
                    primary>Inverse</lk-badge>
                <lk-badge danger>Danger</lk-badge>
                <lk-badge 
                    inverse 
                    danger>Inverse</lk-badge>
                <lk-badge warning>Warning</lk-badge>
                <lk-badge 
                    inverse 
                    warning>Inverse</lk-badge>
                <lk-badge success>Success</lk-badge>
                <lk-badge 
                    inverse 
                    success>Inverse</lk-badge>
            </lk-panel-body>
            <lk-panel-body 
                padding="none"
                padding-bottom="none">
                <format-code
                    code='
<lk-badge>Default</lk-badge>
<lk-badge inverse>Inverse</lk-badge>
<lk-badge primary>Primary</lk-badge>
<lk-badge inverse primary>Inverse</lk-badge>
<lk-badge danger>Danger</lk-badge>
<lk-badge inverse danger>Inverse</lk-badge>
<lk-badge warning>Warning</lk-badge>
<lk-badge inverse warning>Inverse</lk-badge>
<lk-badge success>Success</lk-badge>
<lk-badge inverse success>Inverse</lk-badge>
                    '
                    rounded-bottom-corners
                    language="html"
                />
            </lk-panel-body>
        </lk-panel>
        <lk-panel>
            <lk-panel-body padding-bottom>
                <lk-badge mini>Default</lk-badge>
                <lk-badge 
                    mini 
                    inverse>Inverse</lk-badge>
                <lk-badge 
                    mini 
                    primary>Primary</lk-badge>
                <lk-badge 
                    mini 
                    inverse 
                    primary>Inverse</lk-badge>
                <lk-badge 
                    mini 
                    danger>Danger</lk-badge>
                <lk-badge 
                    mini 
                    inverse 
                    danger>Inverse</lk-badge>
                <lk-badge 
                    mini 
                    warning>Warning</lk-badge>
                <lk-badge 
                    mini 
                    inverse 
                    warning>Inverse</lk-badge>
                <lk-badge 
                    mini 
                    success>Success</lk-badge>
                <lk-badge 
                    mini 
                    inverse 
                    success>Inverse</lk-badge>
            </lk-panel-body>
            <lk-panel-body 
                padding="none"
                padding-bottom="none">
                <format-code
                    code='
<lk-badge mini>Default</lk-badge>
<lk-badge mini inverse>Inverse</lk-badge>
<lk-badge mini primary>Primary</lk-badge>
<lk-badge mini inverse primary>Inverse</lk-badge>
<lk-badge mini danger>Danger</lk-badge>
<lk-badge mini inverse danger>Inverse</lk-badge>
<lk-badge mini warning>Warning</lk-badge>
<lk-badge mini inverse warning>Inverse</lk-badge>
<lk-badge mini success>Success</lk-badge>
<lk-badge mini inverse success>Inverse</lk-badge>
                    '
                    rounded-bottom-corners
                    language="html"
                />
            </lk-panel-body>
        </lk-panel>
        <lk-panel>
            <lk-panel-body padding-bottom>
                <lk-badge pill>Default</lk-badge>
                <lk-badge 
                    pill 
                    inverse>Inverse</lk-badge>
                <lk-badge 
                    pill 
                    primary>Primary</lk-badge>
                <lk-badge 
                    pill 
                    inverse 
                    primary>Inverse</lk-badge>
                <lk-badge 
                    pill 
                    danger>Danger</lk-badge>
                <lk-badge 
                    pill 
                    inverse 
                    danger>Inverse</lk-badge>
                <lk-badge 
                    pill 
                    warning>Warning</lk-badge>
                <lk-badge 
                    pill 
                    inverse 
                    warning>Inverse</lk-badge>
                <lk-badge 
                    pill 
                    success>Success</lk-badge>
                <lk-badge 
                    pill 
                    inverse 
                    success>Inverse</lk-badge>
            </lk-panel-body>
            <lk-panel-body 
                padding="none"
                padding-bottom="none">
                <format-code
                    code='
<lk-badge pill>Default</lk-badge>
<lk-badge pill inverse>Inverse</lk-badge>
<lk-badge pill primary>Primary</lk-badge>
<lk-badge pill inverse primary>Inverse</lk-badge>
<lk-badge pill danger>Danger</lk-badge>
<lk-badge pill inverse danger>Inverse</lk-badge>
<lk-badge pill warning>Warning</lk-badge>
<lk-badge pill inverse warning>Inverse</lk-badge>
<lk-badge pill success>Success</lk-badge>
<lk-badge pill inverse success>Inverse</lk-badge>
                    '
                    rounded-bottom-corners
                    language="html"
                />
            </lk-panel-body>
        </lk-panel>
        <lk-panel margin-bottom="content">
            <lk-panel-body padding-bottom>
                <lk-badge 
                    mini 
                    pill>Default</lk-badge>
                <lk-badge 
                    mini 
                    pill 
                    inverse>Inverse</lk-badge>
                <lk-badge 
                    mini 
                    pill 
                    primary>Primary</lk-badge>
                <lk-badge 
                    mini 
                    pill 
                    inverse 
                    primary>Inverse</lk-badge>
                <lk-badge 
                    mini 
                    pill 
                    danger>Danger</lk-badge>
                <lk-badge 
                    mini 
                    pill 
                    inverse 
                    danger>Inverse</lk-badge>
                <lk-badge 
                    mini 
                    pill 
                    warning>Warning</lk-badge>
                <lk-badge 
                    mini 
                    pill 
                    inverse 
                    warning>Inverse</lk-badge>
                <lk-badge 
                    mini 
                    pill 
                    success>Success</lk-badge>
                <lk-badge 
                    mini 
                    pill 
                    inverse 
                    success>Inverse</lk-badge>
            </lk-panel-body>
            <lk-panel-body 
                padding="none"
                padding-bottom="none">
                <format-code
                    code='
<lk-badge mini pill>Default</lk-badge>
<lk-badge mini pill inverse>Inverse</lk-badge>
<lk-badge mini pill primary>Primary</lk-badge>
<lk-badge mini pill inverse primary>Inverse</lk-badge>
<lk-badge mini pill danger>Danger</lk-badge>
<lk-badge mini pill inverse danger>Inverse</lk-badge>
<lk-badge mini pill warning>Warning</lk-badge>
<lk-badge mini pill inverse warning>Inverse</lk-badge>
<lk-badge mini pill success>Success</lk-badge>
<lk-badge mini pill inverse success>Inverse</lk-badge>
                    '
                    rounded-bottom-corners
                    language="html"
                />
            </lk-panel-body>
        </lk-panel>
    </lk-content>
</template>

<script>
import Code from '../../documentation/components/Code';

export default {
    components: {
        formatCode: Code,
    },
};
</script>

<style module lang="scss">
@import '../../styles/variables';
</style>
