1import type { IconButtonProps } from "./IconButton.types";
2import { cn } from "../../lib/cn";
3import { Pressable } from "react-native";
4
5import { SymbolView } from "./AppSymbol";
6
7const VARIANT_CLASS_NAMES = {
8 standard: ["", "accent-foreground"],
9 primary: ["rounded-full bg-primary", "accent-primary-foreground"],
10 danger: ["rounded-full bg-danger", "accent-danger-foreground"],
11 tonal: ["rounded-full bg-secondary", "accent-secondary-foreground"],
12} as const;
13
14export function IconButton(props: IconButtonProps) {
15 const variant = props.variant ?? "standard";
16 const [containerClassName, iconTintClassName] = VARIANT_CLASS_NAMES[variant];
17 return (
18 <Pressable
19 onPress={props.onPress}
20 disabled={props.disabled}
21 accessibilityLabel={props.accessibilityLabel}
22 accessibilityRole="button"
23 accessibilityState={{ disabled: Boolean(props.disabled), selected: props.selected }}
24 className={cn(
25 "size-12 items-center justify-center",
26 props.disabled && variant !== "standard"
27 ? "rounded-full bg-subtle-strong"
28 : containerClassName,
29 )}
30 >
31 <SymbolView
32 name={props.icon}
33 size={24}
34 tintColorClassName={
35 props.disabled
36 ? "accent-icon-subtle"
37 : variant === "standard"
38 ? (props.tintColorClassName ?? iconTintClassName)
39 : iconTintClassName
40 }
41 />
42 </Pressable>
43 );
44}