refacto icons buttons
This commit is contained in:
Max S
parent
a458888693
commit
1a69962073
@ -29,20 +29,39 @@
|
||||
border: 1px solid var(--button-contained-primary-default-border, rgba(0, 0, 0, 0));
|
||||
background: var(--button-contained-primary-default-background, #005bcb);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-primary-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--button-contained-primary-hovered-border, rgba(0, 0, 0, 0));
|
||||
background: var(--button-contained-primary-hovered-background, #0040a4);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-primary-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border: 1px solid var(--button-contained-primary-pressed-border, rgba(0, 0, 0, 0));
|
||||
background: var(--button-contained-primary-pressed-background, #013391);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-primary-pressed-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&[styleType="outlined"] {
|
||||
svg {
|
||||
stroke: var(--button-outlined-primary-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-primary-50);
|
||||
svg {
|
||||
stroke: var(--button-outlined-primary-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
@ -50,12 +69,24 @@
|
||||
background-color: var(--color-primary-100);
|
||||
color: var(--color-primary-700);
|
||||
border-color: var(--color-primary-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-primary-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[styleType="text"] {
|
||||
svg {
|
||||
stroke: var(--button-text-primary-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-primary-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
@ -63,6 +94,10 @@
|
||||
background-color: transparent;
|
||||
color: var(--color-primary-800);
|
||||
border-color: var(--color-primary-800);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-primary-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -72,20 +107,40 @@
|
||||
background: var(--color-secondary-500);
|
||||
border-color: var(--color-secondary-500);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-secondary-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-secondary-700);
|
||||
border-color: var(--color-secondary-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-secondary-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background: var(--color-secondary-800);
|
||||
border-color: var(--color-secondary-800);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-secondary-pressed-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&[styleType="outlined"] {
|
||||
svg {
|
||||
stroke: var(--button-outlined-secondary-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-secondary-50);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-secondary-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
@ -93,12 +148,24 @@
|
||||
background-color: var(--color-secondary-100);
|
||||
color: var(--color-secondary-700);
|
||||
border-color: var(--color-secondary-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-secondary-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[styleType="text"] {
|
||||
svg {
|
||||
stroke: var(--button-text-secondary-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-secondary-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
@ -106,6 +173,10 @@
|
||||
background-color: transparent;
|
||||
color: var(--color-secondary-800);
|
||||
border-color: var(--color-secondary-800);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-secondary-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -115,20 +186,40 @@
|
||||
background: var(--color-neutral-500);
|
||||
border-color: var(--color-neutral-500);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-neutral-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-neutral-700);
|
||||
border-color: var(--color-neutral-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-neutral-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background: var(--color-neutral-800);
|
||||
border-color: var(--color-neutral-800);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-neutral-pressed-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&[styleType="outlined"] {
|
||||
svg {
|
||||
stroke: var(--button-outlined-neutral-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-neutral-50);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-neutral-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
@ -136,12 +227,24 @@
|
||||
background-color: var(--color-neutral-100);
|
||||
color: var(--color-neutral-700);
|
||||
border-color: var(--color-neutral-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-neutral-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[styleType="text"] {
|
||||
svg {
|
||||
stroke: var(--button-text-neutral-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-neutral-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
@ -149,6 +252,10 @@
|
||||
background-color: transparent;
|
||||
color: var(--color-neutral-800);
|
||||
border-color: var(--color-neutral-800);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-neutral-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -158,21 +265,41 @@
|
||||
background: var(--color-error-600);
|
||||
border-color: var(--color-error-600);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-error-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-error-800);
|
||||
border-color: var(--color-error-800);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-error-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background: var(--color-error-900);
|
||||
border-color: var(--color-error-900);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-error-pressed-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&[styleType="outlined"] {
|
||||
svg {
|
||||
stroke: var(--button-outlined-error-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-error-50);
|
||||
border-color: var(--color-secondary-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-error-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
@ -180,14 +307,26 @@
|
||||
background-color: var(--color-error-100);
|
||||
color: var(--color-secondary-700);
|
||||
border-color: var(--color-secondary-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-error-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[styleType="text"] {
|
||||
svg {
|
||||
stroke: var(--button-text-error-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: var(--color-error-800);
|
||||
border-color: var(--color-error-800);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-error-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
@ -195,6 +334,10 @@
|
||||
background-color: transparent;
|
||||
color: var(--color-error-900);
|
||||
border-color: var(--color-error-900);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-error-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -204,22 +347,42 @@
|
||||
background: var(--color-warning-600);
|
||||
border-color: var(--color-warning-600);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-warning-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-warning-800);
|
||||
border-color: var(--color-warning-800);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-warning-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background: var(--color-warning-900);
|
||||
border-color: var(--color-warning-900);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-warning-pressed-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&[styleType="outlined"] {
|
||||
svg {
|
||||
stroke: var(--button-outlined-warning-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-warning-50);
|
||||
border-color: var(--color-warning-700);
|
||||
color: var(--color-warning-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-warning-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
@ -227,14 +390,26 @@
|
||||
background-color: var(--color-warning-100);
|
||||
color: var(--color-warning-700);
|
||||
border-color: var(--color-warning-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-warning-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[styleType="text"] {
|
||||
svg {
|
||||
stroke: var(--button-text-warning-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: var(--color-warning-800);
|
||||
border-color: var(--color-warning-800);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-warning-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
@ -242,6 +417,10 @@
|
||||
background-color: transparent;
|
||||
color: var(--color-warning-900);
|
||||
border-color: var(--color-warning-900);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-warning-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -251,22 +430,42 @@
|
||||
background: var(--color-success-600);
|
||||
border-color: var(--color-success-600);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-success-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-success-800);
|
||||
border-color: var(--color-success-800);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-success-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background: var(--color-success-900);
|
||||
border-color: var(--color-success-900);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-success-pressed-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&[styleType="outlined"] {
|
||||
svg {
|
||||
stroke: var(--button-outlined-success-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-success-50);
|
||||
border-color: var(--color-success-700);
|
||||
color: var(--color-success-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-success-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
@ -274,14 +473,26 @@
|
||||
background-color: var(--color-success-100);
|
||||
color: var(--color-success-700);
|
||||
border-color: var(--color-success-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-success-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[styleType="text"] {
|
||||
svg {
|
||||
stroke: var(--button-text-success-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: var(--color-success-800);
|
||||
border-color: var(--color-success-800);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-success-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
@ -289,6 +500,10 @@
|
||||
background-color: transparent;
|
||||
color: var(--color-success-900);
|
||||
border-color: var(--color-success-900);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-success-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -298,22 +513,41 @@
|
||||
background: var(--color-info-700);
|
||||
border-color: var(--color-info-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-info-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-info-900);
|
||||
border-color: var(--color-info-900);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-info-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background: var(--color-info-950);
|
||||
border-color: var(--color-info-950);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-contained-info-pressed-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&[styleType="outlined"] {
|
||||
svg {
|
||||
stroke: var(--button-outlined-info-default-contrast);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--color-info-50);
|
||||
border-color: var(--color-info-700);
|
||||
color: var(--color-info-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-info-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
@ -321,14 +555,26 @@
|
||||
background-color: var(--color-info-100);
|
||||
color: var(--color-info-700);
|
||||
border-color: var(--color-info-700);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-outlined-info-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[styleType="text"] {
|
||||
svg {
|
||||
stroke: var(--button-text-info-default-contrast);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: var(--color-info-900);
|
||||
border-color: var(--color-info-900);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-info-hovered-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
@ -336,6 +582,10 @@
|
||||
background-color: transparent;
|
||||
color: var(--color-info-950);
|
||||
border-color: var(--color-info-950);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-text-info-pressed-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import Image from "next/image";
|
||||
import classNames from "classnames";
|
||||
import React, { CSSProperties } from "react";
|
||||
|
||||
import classes from "./classes.module.scss";
|
||||
import classNames from "classnames";
|
||||
|
||||
export enum EButtonVariant {
|
||||
PRIMARY = "primary",
|
||||
@ -33,12 +32,12 @@ type IProps = {
|
||||
size?: EButtonSize;
|
||||
styleType?: EButtonStyleType;
|
||||
fullwidth?: boolean;
|
||||
icon?: string;
|
||||
leftIcon?: React.ReactNode;
|
||||
rightIcon?: React.ReactNode;
|
||||
iconstyle?: CSSProperties;
|
||||
disabled?: boolean;
|
||||
isLoading?: boolean;
|
||||
type?: "button" | "submit";
|
||||
iconposition?: "left" | "right";
|
||||
className?: string;
|
||||
};
|
||||
|
||||
@ -51,12 +50,11 @@ export default function Button(props: IProps) {
|
||||
type = "button",
|
||||
isLoading = false,
|
||||
fullwidth = false,
|
||||
iconposition = "right",
|
||||
onClick,
|
||||
children,
|
||||
icon,
|
||||
iconstyle,
|
||||
className = "",
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
} = props;
|
||||
|
||||
const fullwidthattr = fullwidth.toString();
|
||||
@ -64,15 +62,15 @@ export default function Button(props: IProps) {
|
||||
|
||||
const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr, sizing: size, styleType };
|
||||
delete attributes.fullwidth;
|
||||
delete attributes.icon;
|
||||
delete attributes.leftIcon;
|
||||
delete attributes.rightIcon;
|
||||
delete attributes.iconstyle;
|
||||
delete attributes.iconposition;
|
||||
|
||||
return (
|
||||
<button {...attributes} onClick={onClick} className={classNames(classes["root"], className)} type={type}>
|
||||
{icon && iconposition === "left" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
|
||||
{leftIcon}
|
||||
{children}
|
||||
{icon && iconposition === "right" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
|
||||
{rightIcon}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,11 +4,12 @@ import Newsletter from "@Front/Components/DesignSystem/Newsletter";
|
||||
import Table from "@Front/Components/DesignSystem/Table";
|
||||
import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag";
|
||||
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
|
||||
import Tabs from "@Front/Components/Elements/Tabs";
|
||||
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
||||
import { ArrowLongLeftIcon, ArrowLongRightIcon } from "@heroicons/react/24/outline";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
|
||||
import classes from "./classes.module.scss";
|
||||
import Tabs from "@Front/Components/Elements/Tabs";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
|
||||
export default function DesignSystem() {
|
||||
const userDb = useMemo(
|
||||
@ -134,66 +135,136 @@ export default function DesignSystem() {
|
||||
|
||||
<Typography typo={ETypo.TEXT_LG_BOLD}>Buttons</Typography>
|
||||
<div className={classes["rows"]}>
|
||||
<Button variant={EButtonVariant.PRIMARY}>Primary</Button>
|
||||
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
|
||||
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.PRIMARY}>
|
||||
Primary
|
||||
</Button>
|
||||
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
|
||||
<Button
|
||||
leftIcon={<ArrowLongLeftIcon />}
|
||||
rightIcon={<ArrowLongRightIcon />}
|
||||
variant={EButtonVariant.PRIMARY}
|
||||
styleType={EButtonStyleType.OUTLINED}>
|
||||
Primary
|
||||
</Button>
|
||||
<Button
|
||||
leftIcon={<ArrowLongLeftIcon />}
|
||||
rightIcon={<ArrowLongRightIcon />}
|
||||
variant={EButtonVariant.PRIMARY}
|
||||
styleType={EButtonStyleType.TEXT}>
|
||||
Primary
|
||||
</Button>
|
||||
</div>
|
||||
<div className={classes["rows"]}>
|
||||
<Button variant={EButtonVariant.SECONDARY}>Secondary</Button>
|
||||
<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.OUTLINED}>
|
||||
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.SECONDARY}>
|
||||
Secondary
|
||||
</Button>
|
||||
<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.TEXT}>
|
||||
<Button
|
||||
leftIcon={<ArrowLongLeftIcon />}
|
||||
rightIcon={<ArrowLongRightIcon />}
|
||||
variant={EButtonVariant.SECONDARY}
|
||||
styleType={EButtonStyleType.OUTLINED}>
|
||||
Secondary
|
||||
</Button>
|
||||
<Button
|
||||
leftIcon={<ArrowLongLeftIcon />}
|
||||
rightIcon={<ArrowLongRightIcon />}
|
||||
variant={EButtonVariant.SECONDARY}
|
||||
styleType={EButtonStyleType.TEXT}>
|
||||
Secondary
|
||||
</Button>
|
||||
</div>
|
||||
<div className={classes["rows"]}>
|
||||
<Button variant={EButtonVariant.NEUTRAL}>Neutral</Button>
|
||||
<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.OUTLINED}>
|
||||
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.NEUTRAL}>
|
||||
Neutral
|
||||
</Button>
|
||||
<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.TEXT}>
|
||||
<Button
|
||||
leftIcon={<ArrowLongLeftIcon />}
|
||||
rightIcon={<ArrowLongRightIcon />}
|
||||
variant={EButtonVariant.NEUTRAL}
|
||||
styleType={EButtonStyleType.OUTLINED}>
|
||||
Neutral
|
||||
</Button>
|
||||
<Button
|
||||
leftIcon={<ArrowLongLeftIcon />}
|
||||
rightIcon={<ArrowLongRightIcon />}
|
||||
variant={EButtonVariant.NEUTRAL}
|
||||
styleType={EButtonStyleType.TEXT}>
|
||||
Neutral
|
||||
</Button>
|
||||
</div>
|
||||
<div className={classes["rows"]}>
|
||||
<Button variant={EButtonVariant.ERROR}>Error</Button>
|
||||
<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.OUTLINED}>
|
||||
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.ERROR}>
|
||||
Error
|
||||
</Button>
|
||||
<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.TEXT}>
|
||||
<Button
|
||||
leftIcon={<ArrowLongLeftIcon />}
|
||||
rightIcon={<ArrowLongRightIcon />}
|
||||
variant={EButtonVariant.ERROR}
|
||||
styleType={EButtonStyleType.OUTLINED}>
|
||||
Error
|
||||
</Button>
|
||||
<Button
|
||||
leftIcon={<ArrowLongLeftIcon />}
|
||||
rightIcon={<ArrowLongRightIcon />}
|
||||
variant={EButtonVariant.ERROR}
|
||||
styleType={EButtonStyleType.TEXT}>
|
||||
Error
|
||||
</Button>
|
||||
</div>
|
||||
<div className={classes["rows"]}>
|
||||
<Button variant={EButtonVariant.WARNING}>Warning</Button>
|
||||
<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.OUTLINED}>
|
||||
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.WARNING}>
|
||||
Warning
|
||||
</Button>
|
||||
<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
|
||||
<Button
|
||||
leftIcon={<ArrowLongLeftIcon />}
|
||||
rightIcon={<ArrowLongRightIcon />}
|
||||
variant={EButtonVariant.WARNING}
|
||||
styleType={EButtonStyleType.OUTLINED}>
|
||||
Warning
|
||||
</Button>
|
||||
<Button
|
||||
leftIcon={<ArrowLongLeftIcon />}
|
||||
rightIcon={<ArrowLongRightIcon />}
|
||||
variant={EButtonVariant.WARNING}
|
||||
styleType={EButtonStyleType.TEXT}>
|
||||
Warning
|
||||
</Button>
|
||||
</div>
|
||||
<div className={classes["rows"]}>
|
||||
<Button variant={EButtonVariant.SUCCESS}>SUCCESS</Button>
|
||||
<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.OUTLINED}>
|
||||
SUCCESS
|
||||
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.SUCCESS}>
|
||||
Success
|
||||
</Button>
|
||||
<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.TEXT}>
|
||||
SUCCESS
|
||||
<Button
|
||||
leftIcon={<ArrowLongLeftIcon />}
|
||||
rightIcon={<ArrowLongRightIcon />}
|
||||
variant={EButtonVariant.SUCCESS}
|
||||
styleType={EButtonStyleType.OUTLINED}>
|
||||
Success
|
||||
</Button>
|
||||
<Button
|
||||
leftIcon={<ArrowLongLeftIcon />}
|
||||
rightIcon={<ArrowLongRightIcon />}
|
||||
variant={EButtonVariant.SUCCESS}
|
||||
styleType={EButtonStyleType.TEXT}>
|
||||
Success
|
||||
</Button>
|
||||
</div>
|
||||
<div className={classes["rows"]}>
|
||||
<Button variant={EButtonVariant.INFO}>INFO</Button>
|
||||
<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.OUTLINED}>
|
||||
INFO
|
||||
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.INFO}>
|
||||
Info
|
||||
</Button>
|
||||
<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.TEXT}>
|
||||
INFO
|
||||
<Button
|
||||
leftIcon={<ArrowLongLeftIcon />}
|
||||
rightIcon={<ArrowLongRightIcon />}
|
||||
variant={EButtonVariant.INFO}
|
||||
styleType={EButtonStyleType.OUTLINED}>
|
||||
Info
|
||||
</Button>
|
||||
<Button
|
||||
leftIcon={<ArrowLongLeftIcon />}
|
||||
rightIcon={<ArrowLongRightIcon />}
|
||||
variant={EButtonVariant.INFO}
|
||||
styleType={EButtonStyleType.TEXT}>
|
||||
Info
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user