56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import React, { forwardRef } from 'react';
|
|
import { ButtonProps } from './button.types';
|
|
import { bool, oneOf, string } from 'prop-types';
|
|
import { ButtonLayout } from '../button-layout/button-layout';
|
|
import { IconWrapper } from '../../icon/icon-wrapper';
|
|
import { Typography } from '../../typography/typography';
|
|
|
|
/**
|
|
* Button component
|
|
** description
|
|
*/
|
|
|
|
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
(
|
|
{
|
|
ripple = true,
|
|
className = '',
|
|
disabled = false,
|
|
icon = undefined,
|
|
variant = 'filled',
|
|
iconPlace = 'left',
|
|
centralRipple = false,
|
|
...props
|
|
},
|
|
ref,
|
|
) => (
|
|
<ButtonLayout
|
|
{...props}
|
|
centralRipple={centralRipple}
|
|
className={`${variant} ${className}`}
|
|
disabled={disabled}
|
|
ref={ref}
|
|
ripple={ripple}
|
|
>
|
|
<IconWrapper icon={icon} iconPlace={iconPlace}>
|
|
<Typography
|
|
className={'label-large'}
|
|
role={'label'}
|
|
size={'large'}
|
|
>
|
|
{props.children}
|
|
</Typography>
|
|
</IconWrapper>
|
|
</ButtonLayout>
|
|
),
|
|
);
|
|
|
|
Button.propTypes = {
|
|
icon: string,
|
|
children: string,
|
|
centralRipple: bool,
|
|
variant: oneOf(['filled', 'outlined', 'elevated', 'tonal', 'text']),
|
|
};
|