Button 🔗

Кнопки являются неотъемлимой частью современных веб-приложений

Пример использования:

Добавить в закладки

Исходный код для примера выше:

<script>
    let isBookmarked = false
    let modal = undefined
    const icons = ['pack/bookmark-outlined', 'pack/bookmark-fill']
</script>

<Modal bind:this={ modal } align="center">
    <Heading size={2} color="var(--blue)">Модальное окно</Heading>
    <Text className="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error repudiandae numquam sint nobis labore quibusdam.</Text>
    <br />
    <Button variant="blue" on:click={ modal.close }>Закрыть</Button>
    <Rainbow size="L" slot="footer" />
</Modal>

<Button variant="primary" size="S" on:click={ modal.open }>Открыть модальное окно</Button>
<Button variant="blue" size="M" href="/">Вернуться на главную</Button>
<Button variant="primary" size="L" on:click={ () => isBookmarked = !isBookmarked }>
    <Icon name={ isBookmarked ? icons[1] : icons[0] } slot="before" width={ 24 } height={ 24 } />
    <svelte:fragment>
        { isBookmarked ? 'Убрать из закладок' : 'Добавить в закладки' }
    </svelte:fragment>
</Button>

Параметры:

variant

enum

Вариант отображения кнопки.
Поддерживаются два значения: primary и blue.
Значение по умолчанию: primary

size

enum

Размер кнопки.
Поддерживаются три значения: S, M и L.
Значение по умолчанию: M

type

string

Аналог стандартного атрибута type
Значение по умолчанию: submit

href

string

Используется для добавления кнопке функционала ссылки (переход по страницам по нажатию)

target

string

Определяет, где откроется ссылка из параметра href (в этом же окне, в новом и т.д.)
Значение по умолчанию: _SELF

node

HTMLElement

Параметр для связки с HTML-элементом, который лежит в основе компонента
(аналог стандартного bind:this)

id

string

Аналог стандартного атрибута id

className

string

Аналог стандартного атрибута class

Поддерживаемые события:

on:click

on:focus

on:blur

on:mouseover

on:mouseleave

on:mouseup

on:mousedown

Слоты:

default

Основное содержание кнопки

before

Контент перед основным содержанием

after

Контент после основного содержания