Simple button component
import React from "react";
import { Button } from "aloria-ui";
export default function App() {
return <Button>Hello</Button>;
}
The ComponentName component takes the following props:
-
btnColor
: It specifies the background color of the button. Default value:#29313D
. -
btnHoverColor
: It specifies the background color of the button on hover. Default value:#222322
. -
btnShadow
: It specifies the box shadow color of the button. Default value:#111111
. -
borderRadius
: It specifies the border radius of the button. Default value:5px
. -
width
: It specifies the width of the button. Default value:150px
. -
textColor
: It specifies the font color of the button. Default value:#ffffff
. -
onClick
: It specifies the onClick function of the button.
Here is an example of how to use the ComponentName component.
import React, { useState } from "react";
import { Button } from "aloria-ui";
export default function App() {
const [value, setValue] = useState("Hello");
const setChange = () => {
setValue(value === "Hello" ? "Bye" : "Hello");
};
return (
<>
<Button>Hello</Button>
<Button onClick={() => setChange()}>{value}</Button>
</>
);
}
The button on the right has been clicked.