Lite UI | Button

Guide

Installation

Design Principles

Components

Lite UI

Guide

Components

Button

Button is used to trigger an action or perform an operation when clicked.

Import

import { Button } from '@ma9pie/lite-ui';

Source

components/Button.tsx

Examples

Full

import { Button } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex gap-4 flex-wrap">
      <Button>Button</Button>
      <Button full>Full Button</Button>
    </div>
  );
};

export default App;

Size

import { Button } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex items-center gap-4 flex-wrap">
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </div>
  );
};

export default App;

Radius

import { Button } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex gap-4 flex-wrap">
      <Button radius="none">None</Button>
      <Button radius="sm">Small</Button>
      <Button radius="md">Medium</Button>
      <Button radius="lg">Large</Button>
      <Button radius="full">Full</Button>
    </div>
  );
};

export default App;

Color

import { Button } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex gap-4 flex-wrap">
      <Button color="default">Default</Button>
      <Button color="primary">Primary</Button>
      <Button color="#ef4444">red</Button>
      <Button color="limegreen">green</Button>
      <Button color="rgb(139 92 246)">violet</Button>
    </div>
  );
};

export default App;

Disabled

import { Button } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  const handleClickButton = () => {
    alert('Clicked!');
  };

  return (
    <div className="flex gap-4 flex-wrap">
      <Button onClick={handleClickButton}>Button</Button>
      <Button disabled onClick={handleClickButton}>
        Disabled
      </Button>
    </div>
  );
};

export default App;

Disable ripple

import { Button } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex gap-4 flex-wrap">
      <Button>Button</Button>
      <Button disableRipple>DisableRipple</Button>
    </div>
  );
};

export default App;

API

Button props

Property	Type	Description	Default
full	boolean	Full width button.	false
size	sm \| md \| lg	Button's size.	"md"
radius	none \| sm \| md \| lg \| full	Button's border radius.	"md"
color	default \| primary \| string	Button's color.	"default"
disabled	boolean	Disabled button.	false
disableRipple	boolean	Inactive ripple animation.	false
children	ReactNode	Button's content.	-
onClick	(...args: any) => void	onClick event.	-

Default props

Property	Type	Description	Default
key	string	Unique key that identifies repeated elements.	-
className	string	Attribute used to add classes to HTML elements.	-
style	CSSProperties	Attribute used to apply CSS styles directly to HTML elements.	-

Made by ma9pie

Deployed on