Button

@devgrace/ui Button 컴포넌트

Interface

type ColorThemes =
  | 'blue'
  | 'brown'
  | 'cyan'
  | 'gray'
  | 'green'
  | 'indigo'
  | 'lime'
  | 'orange'
  | 'pink'
  | 'purple'
  | 'red'
  | 'teal'
  | 'yellow';

export interface ButtonProps extends React.ComponentProps<'button'> {
  children: React.ReactNode;
  isLoading?: boolean; // defaut: false
  fullWidth?: boolean; // defaut: false
  fontWeight?: CSSProperties['fontWeight']; // default: 700
  size?: 'small' | 'medium' | 'large'; // default: 'medium'
  shape?: 'rect' | 'round'; // default: 'contained'
  variant?: 'contained' | 'outlined' | 'text'; // default: 'round'
  colorTheme?: ColorThemes; // default: blue
  fontColor?: CSSProperties['color'];
}

const Button: React.ForwardRefExoticComponent<
  Omit<ButtonProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
>;

Usage

Default Case

import { Button } from '@devgrace/ui';

const Example = () => {
  const wrapperStyle = useMemo(() => {
    return {
      padding: '20px',
      border: '1px solid #e7e7e7',
      display: 'flex',
      flexDirection: 'column',
      minWidth: '300px'
      maxWidth: '400px',
      gap: '10px',
    };
  }, []);

  return (
    <div style={wrapperStyle}>
      {/* Small */}
      <Button size="small">Contained Button</Button>
      <Button variant="outlined" size="small">OutLined Button</Button>
      <Button variant="text" size="small">Text Button</Button>
      
      {/* Medium */}
      <Button size="medium" colorTheme="indigo">Contained Button</Button>
      <Button size="medium" variant="outlined" colorTheme="indigo">OutLined Button</Button>
      <Button size="medium" variant="text" colorTheme="indigo">Text Button</Button>

      {/* Large */}
      <Button 
        size="large" 
        colorTheme="pink" 
        shape="rect"
      >
        Contained Button
      </Button>
      <Button 
        size="large" 
        variant="outlined" 
        colorTheme="pink" 
        shape="rect"
      >
        Outlined Button
      </Button>
      <Button 
        size="large" 
        variant="text" 
        colorTheme="pink" 
        shape="rect"
      >
        Text Button
      </Button>

      {/* Disabled */}
      <Button disabled>Contained Button</Button>
      <Button disabled variant="outlined">OutLined Button</Button>
      <Button disabled variant="text">Text Button</Button>

      {/* Loading */}
      <Button isLoading>Contained Button</Button>
      <Button isLoading variant="outlined" color="indigo">OutLined Button</Button>
      <Button isLoading variant="text" color="pink">Text Button</Button>
    </div>
  );
};

Small

Medium

Large

Disabled

Loading

FullWidth Case

import { Button } from '@devgrace/ui'

const Example = () => {
  const wrapperStyle = useMemo(() => {
    return {
      padding: '20px',
      border: '1px solid #e7e7e7',
      display: 'flex',
      flexDirection: 'column',
      minWidth: '300px',
      maxWidth: '400px',
      gap: '10px',
    };
  }, []);

  return (
    <div style={wrapperStyle}>
      <Button fullWidth>Contained Button</Button>
      <Button fullWidth variant="outlined">OutLined Button</Button>
      <Button fullWidth variant="text">Text Button</Button>
      <Button fullWidth disabled>Disabled Button</Button>
      <Button fullWidth isLoading>Loading Button</Button>
    </div>
  );
};