@yandex/ui/esm/Button/__examples__/all.example.js

Yandex UI components

import React from 'react';
import { Button } from '@yandex-lego/components/Button/desktop/bundle';
import { Icon } from '@yandex-lego/components/Icon/Icon.bundle/desktop';
var view = ['default', 'action', 'pseudo', 'link', 'clear', 'raised'];
var rPins = ['round-round', 'round-clear', 'clear-round', 'round-brick', 'brick-round'];
var cPins = ['circle-circle', 'circle-clear', 'clear-circle', 'circle-brick', 'brick-circle'];
var qPins = ['brick-brick', 'brick-clear', 'clear-brick'];
var styles = "\n    .Showcase-Item .Button2 {\n        margin-right: 10px;\n        margin-bottom: 20px;\n    }\n";
export var All = function () { return (React.createElement(React.Fragment, null,
    React.createElement("style", null, styles),
    view.map(function (view) { return (React.createElement("div", { key: view, className: "Showcase-Item" },
        React.createElement(Button, { view: view, size: "l", title: "Button view " + view + " size l" }, "Button"),
        React.createElement(Button, { view: view, size: "m", title: "Button view " + view + " size m" }, "Button"),
        React.createElement(Button, { view: view, size: "s", title: "Button view " + view + " size s" }, "Button"),
        React.createElement(Button, { view: view, size: "s", disabled: true, title: "Button view " + view + " disabled" }, "Button"),
        React.createElement(Button, { view: view, size: "s", checked: true, title: "Button view " + view + " checked" }, "Button"),
        React.createElement(Button, { view: view, size: "s", progress: true, title: "Button view " + view + " progress" }, "Button"),
        React.createElement(Button, { view: view, size: "s", iconLeft: function (className) { return (React.createElement(Icon, { size: "s", type: "arrow", direction: "left", className: className })); }, iconRight: function (className) { return (React.createElement(Icon, { size: "s", type: "arrow", direction: "left", className: className })); }, title: "Button with icon view " + view + " size s" }, "Button"),
        React.createElement(Button, { view: view, size: "s", icon: function (className) { return React.createElement(Icon, { size: "s", type: "arrow", direction: "left", className: className }); }, title: "Button with icon view " + view + " size s" }))); }),
    view.map(function (view) { return (React.createElement("div", { key: view, className: "Showcase-Item" },
        rPins.map(function (pin) { return (React.createElement(React.Fragment, null,
            React.createElement(Button, { title: "Button view " + view + " pin " + pin, key: pin, pin: pin, view: view, size: "m" }, "Button"),
            React.createElement(Button, { title: "Button view " + view + " pin " + pin, icon: function (className) { return (React.createElement(Icon, { size: "s", type: "arrow", direction: "left", className: className })); }, key: pin, pin: pin, view: view, size: "m" }))); }),
        React.createElement("br", null),
        cPins.map(function (pin) { return (React.createElement(React.Fragment, null,
            React.createElement(Button, { title: "Button view " + view + " pin " + pin, key: pin, pin: pin, view: view, size: "m" }, "Button"),
            React.createElement(Button, { title: "Button view " + view + " pin " + pin, icon: function (className) { return (React.createElement(Icon, { size: "s", type: "arrow", direction: "left", className: className })); }, key: pin, pin: pin, view: view, size: "m" }))); }),
        React.createElement("br", null),
        qPins.map(function (pin) { return (React.createElement(React.Fragment, null,
            React.createElement(Button, { title: "Button view " + view + " pin " + pin, key: pin, pin: pin, view: view, size: "m" }, "Button"),
            React.createElement(Button, { title: "Button view " + view + " pin " + pin, icon: function (className) { return (React.createElement(Icon, { size: "s", type: "arrow", direction: "left", className: className })); }, key: pin, pin: pin, view: view, size: "m" }))); }),
        React.createElement(Button, { title: "Button view " + view + " pin clear-clear", pin: "clear-clear", view: view, size: "m" }, "Button"))); }))); };