Button

Buttons allow users to perform actions and choose with a single tap.

Usage

import { Button } from '@elegantui/atoms';

Basic Example

import { Button } from '@elegantui/atoms';

export default function App() {
  return <Button>Hello Friend</Button>;
}

Appearances

Button component is available in six appearances.

import { Button } from '@elegantui/atoms';

export default function App() {
  return (
    <Button
      appearance='primary' // 'default' | 'secondary' | 'success' | 'warning' | 'error'
    >
      Hello Friend
    </Button>
  );
}

Sizes

Button component is available in three sizes.

import { Button } from '@elegantui/atoms';

export default function App() {
  return (
    <Button
      size='sm' // 'md' | 'lg'
      appearance='primary'
    >
      Hello Friend
    </Button>
  );
}

Variants

Button component is available in four variants.

import { Button } from '@elegantui/atoms';

export default function App() {
  return (
    <>
      <Button
        appearance='primary'
        variant='solid' // 'outline' | 'link' | 'ghost'
      >
        Solid
      </Button>
    </>
  );
}

States

Button component can be configured to have loading and disabled states by passing props of the same name respectively.

import { Button } from '@elegantui/atoms';

export default function App() {
  return (
    <>
      <Button appearance='primary' style={{ marginTop: '1rem' }} loading>
        Loading
      </Button>
      <Button appearance='primary' style={{ marginTop: '1rem' }} disabled>
        Disabled
      </Button>
    </>
  );
}

Custom styles

Button component allows you to configure your own styles. Styles can be provided either through the React style prop or CSS classes using className prop.

import { Button } from '@elegantui/atoms';

export default function App() {
  return (
    <Button
      style={{
        marginTop: '1rem',
        backgroundColor: 'chocolate',
        color: 'white'
      }}
    >
      Custom Styles
    </Button>
  );
}

Available Props