ButtonAction

Кнопка без фона. Может совершать действия или открывать контекстные окна PopOver и ModalWindow.

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

HTML

<ds-button-action icon="search" text="Я твоя кнопка с иконкой!"></ds-button-action>

<script>
  const button = document.getElementById('button');
  if (button) {
    button.addEventListener('input', (e) => {
      // При клике стрелка справа повернется наверх
      button.setAttribute('up', true);
    });
  }
</script>

React

import { useState, useCallback } from 'react';
import { Input } from '@rir/ds-library';

function Component() {
  const [isUp, setIsUp] = useState(false);

  const onInput = useCallback((e: Event) => {
    console.log('Событие input на элементе ButtonAction!', e);
    setIsUp(!isUp);
  }, []);

  return (
    <>
      <ButtonAction
        arrow
        up={isUp}
        text="Я твоя кнопка со стрелкой!"
        onInput={onInput}
      ></ButtonAction>
    </>
  );
}

export default Component;

API

Props

Name	Type	Description	Default
size	String: ['sulguni', 'briscola']	Токен размера кнопки	'sulguni'
color	enum Colors: ['rocky', 'matrix', 'lebowski', 'fargo', 'fightclub', 'gentlemen', 'aquaman', 'harakiri', 'troy', 'metropolis', 'white']	Токен цвета кнопки	'rocky'
text	String	Текст кнопки	''
icon	String	Иия иконки слева (без '_16' в конце)	''
arrow	Boolean	Показывается ли "стрелка" справа у кнопки?	false
up	Boolean	Стрелка справа вверх?	false
_up	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined
disabled	Boolean	Неактивная, "выключенная" кнопка?	false
_disabled	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined

Events

Name	Description
input	Событие на изменение ввода

Примеры проектов

React

Angular

Vue