Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-08-23 09:07:40 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(component): style button component to support icon-only buttons

Browse Source
This commit is contained in:
Ash Monty
2023-04-01 00:10:23 +02:00
parent 07b1d08790
commit 8181b13119
2 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/Button/Button.js
View File

@@ -6,6 +6,7 @@ import styles from './Button.module.css';
* A reusable component for buttons.
*
* @param {boolean} isPrimary - Whether the button is primary or not. Defaults to false.
* @param {boolean} isIcon - Whether the button only contains an icon. Defaults to false.
* @param className - An optional classname.
* @param {string} style - Custom styles to apply to the title.
*
@@ -15,9 +16,9 @@ import styles from './Button.module.css';
*/
export default function Button(ctx) {
const { children, className, isPrimary, onClick } = ctx;
const { children, className, isPrimary, isIcon, onClick } = ctx;
return (
<button className={classNames(styles.button, { [styles.primary]: isPrimary }, className)} onClick={onClick}>
<button className={classNames(styles.button, { [styles.primary]: isPrimary, [styles.icon]: isIcon }, className)} onClick={onClick}>
{children}
</button>
);

7
components/Button/Button.module.css
View File

@@ -10,6 +10,13 @@
cursor: pointer;
}
.button.icon {
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.button:hover {
background: var(--bg-shade-3-5);
}