Кнопка

Часто используемая кнопка операции; поддерживает различные типы, размеры, состояния, а также фирменные цвета темы в китайском стиле (国风).

Базовое использование

Базовое использование

import { LhButton } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <LhButton>Обычная кнопка</LhButton>
      <LhButton type="primary">Основная кнопка</LhButton>
      <LhButton type="success">Кнопка «Успех»</LhButton>
      <LhButton type="warning">Кнопка «Внимание»</LhButton>
      <LhButton type="danger">Кнопка «Опасность»</LhButton>
      <LhButton type="info">Кнопка «Информация»</LhButton>
    </>
  )
}

Размеры и состояния

Размеры и состояния

import { LhButton } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <LhButton size="large">Большая кнопка</LhButton>
      <LhButton>Обычная кнопка</LhButton>
      <LhButton size="small">Малая кнопка</LhButton>

      <LhButton type="primary" loading>Загрузка</LhButton>
      <LhButton type="primary" disabled>Отключено</LhButton>
      <LhButton type="primary" icon="search">Кнопка со значком</LhButton>
      <LhButton type="primary" round>Скруглённая кнопка</LhButton>
      <LhButton type="primary" plain>Плоская кнопка</LhButton>
    </>
  )
}

Props компонента Button

Проп	Описание	Тип	Допустимые значения	По умолчанию
type	Тип кнопки	'text' | 'primary' | 'success' | 'warning' | 'danger' | 'info'	—	'text'
size	Размер	'large' | 'middle' | 'small'	—	Из ConfigProvider
loading	Состояние загрузки	boolean	—	false
disabled	Отключённое состояние	boolean	—	false
plain	Плоское оформление	boolean	—	false
block	Во всю ширину (ширина 100%)	boolean	—	false
round	Скругление углов	boolean	—	false
circle	Круглая форма	boolean	—	false
icon	Имя значка	LhIconName	—	—
nativeType	Нативный атрибут type	'button' | 'submit' | 'reset'	—	'button'
href	Если задано, выводится как <a>	string	—	—
target	target в режиме href	string	—	—
themeVars	Переменные темы на уровне компонента	Record<string, string>	—	—
bgPattern	Фоновый узор на уровне компонента	string	—	—
sx	Сокращение для макета	SxProps	—	—

События Button

Событие	Описание	Сигнатура обратного вызова	Аналог во Vue
onClick	Срабатывает при нажатии (не срабатывает при disabled / loading)	(event: MouseEvent) => void	@click

Стили

import '@lh-ui/react/style/button'