0.0.7 • Published 4 years ago
camille v0.0.7
Camille
Camille is a minimalistic UI library for ReactJS.
Installation
$ yarn add camille
// Or NPM
$ npm install camilleExample Usage
In this example, we use the Button component in order to easily render a simple, stylish and fully customizable button:
import React from 'react';
import { Button } from 'camille';
export default ({ handleClick }) => {
return (
<div>
<Button size="large" color="green" onClick={handleClick}>
Checkout
</Button>
</div>
);
};Components
Button
A Button is a UI element that provides the user a way to trigger an event.
Props
| Name | Default | Type | Description |
|---|---|---|---|
| size | normal | string | Determines the width, height and font size of the button.Enumsmini small normal large massive |
| disabled | false | bool | Fades the button and makes it uninteractable. |
| compact | false | bool | Greatly reduces padding of the button. |
| color | default | enum | Determines the color of the button.Enumsdefault red orange yellow olive green teal blue violet purple pink brown grey black |
| inverted | false | bool | Swaps the background and font color. |
Avatar
An avatar is an image or profile graphic that typically appears next to a user's name.
Props
| Name | Default | Type | Description |
|---|---|---|---|
| src | string | Source image. | |
| size | 40px | string | Determines the width and height of the image. |
| radius | 100px | string | Determines how rounded the corners of the avatar are. |
| status | offline | enum | Determines the icon next to the Avatar image.Status can have a value of online, offline or away.Enumsonline offline away |