diff --git a/src/elements/Button.tsx b/src/elements/Button.tsx index 08c757add..783e4ea59 100644 --- a/src/elements/Button.tsx +++ b/src/elements/Button.tsx @@ -16,6 +16,7 @@ export type ButtonProps = Omit, 'childre Icon?: FunctionComponent | undefined accent?: Accent | undefined children?: string | undefined + isActive?: boolean | undefined isFullWidth?: boolean | undefined size?: Size | undefined /** Prevent onClick event propagation. */ @@ -26,6 +27,7 @@ export function Button({ children, className, Icon, + isActive = false, isFullWidth = false, onClick, size = Size.NORMAL, @@ -60,14 +62,15 @@ export function Button({ () => ({ as: StyledButton, children: commonChildren, - className: classnames('Element-Button', className), + className: classnames('Element-Button', isActive && '_active', className), + isActive, isFullWidth, onClick: handleClick, size, type, ...nativeProps }), - [className, commonChildren, handleClick, isFullWidth, nativeProps, size, type] + [className, commonChildren, handleClick, isActive, isFullWidth, nativeProps, size, type] ) switch (accent) { diff --git a/src/elements/IconButton.tsx b/src/elements/IconButton.tsx index 8aab82f9d..be9105939 100644 --- a/src/elements/IconButton.tsx +++ b/src/elements/IconButton.tsx @@ -19,6 +19,7 @@ export type IconButtonProps = Omit, 'chi color?: string | undefined /** In pixels, override `size` prop default values. */ iconSize?: number | undefined + isActive?: boolean | undefined /** Remove button border and padding. */ isCompact?: boolean | undefined size?: Size | undefined @@ -31,6 +32,7 @@ export function IconButton({ color, Icon, iconSize, + isActive = false, isCompact, onClick, size = Size.NORMAL, @@ -59,14 +61,15 @@ export function IconButton({ const commonProps = useMemo( () => ({ children: commonChildren, - className: classnames('Element-IconButton', className), + className: classnames('Element-IconButton', isActive && '_active', className), + isActive, isCompact, onClick: handleClick, size, type, ...nativeProps }), - [className, commonChildren, handleClick, isCompact, nativeProps, size, type] + [className, commonChildren, handleClick, isActive, isCompact, nativeProps, size, type] ) switch (accent) {