ferns-ui 0.39.5 → 0.39.6

package/dist/Badge.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { BadgeProps } from "./Common";
-export declare function Badge({ title, position, type, color, }: BadgeProps): React.ReactElement;
+export declare function Badge({ title, position, type, color, size, iconProps, fontColor, fontWeight, rounding, }: BadgeProps): React.ReactElement;

package/dist/Badge.js

@@ -1,30 +1,29 @@
-import React, { useContext } from "react";
-import { Text, View } from "react-native";
-import { ThemeContext } from "./Theme";
-export function Badge({ title, position = "middle", type = "info", color, }) {
-    const { theme } = useContext(ThemeContext);
+import React from "react";
+import { Box } from "./Box";
+import { Icon } from "./Icon";
+import { Text } from "./Text";
+export function Badge({ title, position = "middle", type = "info", color, size = "xs", iconProps, fontColor = "white", fontWeight = "bold", rounding = "pill", }) {
     if (color && type !== "custom") {
         console.warn('Badge color only supported when `type` is set to "custom".');
     }
     const badgeColor = type === "custom" ? color : type;
-    return (React.createElement(View, { style: {
-            backgroundColor: theme[badgeColor],
-            borderRadius: 2,
-            height: 14,
-            paddingTop: 2,
-            paddingBottom: 2,
-            paddingLeft: 4,
-            paddingRight: 4,
-            marginTop: -4,
-            marginLeft: 4,
-            display: "flex",
-            alignSelf: position === "middle" ? "center" : "flex-start",
-        } },
-        React.createElement(Text, { style: {
-                fontSize: 10,
-                flexWrap: "nowrap",
-                color: "white",
-                fontWeight: "bold",
-            } }, title)));
+    function renderIcon() {
+        if (iconProps && iconProps.name) {
+            return (React.createElement(Box, { marginRight: title ? 1 : 0 },
+                React.createElement(Icon, Object.assign({ color: (iconProps === null || iconProps === void 0 ? void 0 : iconProps.color) ? iconProps.color : fontColor }, iconProps, { size: size }))));
+        }
+        else {
+            return null;
+        }
+    }
+    function renderLabel() {
+        if (!title) {
+            return null;
+        }
+        return (React.createElement(Text, { color: fontColor, size: size, weight: fontWeight }, title));
+    }
+    return (React.createElement(Box, { alignItems: "baseline", alignSelf: position === "middle" ? "center" : position === "bottom" ? "end" : "start", color: badgeColor, direction: "row", height: "min-content", justifyContent: "center", marginLeft: 1, marginTop: position === "top" ? -1 : 0, paddingX: (typeof rounding === "number" && rounding >= 4) || rounding === "pill" ? 2 : 1, paddingY: 1, rounding: rounding, width: "max-content" },
+        renderIcon(),
+        renderLabel()));
 }
 //# sourceMappingURL=Badge.js.map

package/dist/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,UAAU,EAAC,MAAM,OAAO,CAAC;AACxC,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,cAAc,CAAC;AAGxC,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAErC,MAAM,UAAU,KAAK,CAAC,EACpB,KAAK,EACL,QAAQ,GAAG,QAAQ,EACnB,IAAI,GAAG,MAAM,EACb,KAAK,GACM;IACX,MAAM,EAAC,KAAK,EAAC,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,IAAI,KAAK,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC/B,OAAO,CAAC,IAAI,CAAC,4DAA4D,CAAC,CAAC;IAC7E,CAAC;IACD,MAAM,UAAU,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAM,CAAC,CAAC,CAAC,IAAI,CAAC;IAErD,OAAO,CACL,oBAAC,IAAI,IACH,KAAK,EAAE;YACL,eAAe,EAAE,KAAK,CAAC,UAAU,CAAC;YAClC,YAAY,EAAE,CAAC;YACf,MAAM,EAAE,EAAE;YACV,UAAU,EAAE,CAAC;YACb,aAAa,EAAE,CAAC;YAChB,WAAW,EAAE,CAAC;YACd,YAAY,EAAE,CAAC;YACf,SAAS,EAAE,CAAC,CAAC;YACb,UAAU,EAAE,CAAC;YACb,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY;SAC3D;QAED,oBAAC,IAAI,IACH,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,QAAQ;gBAClB,KAAK,EAAE,OAAO;gBACd,UAAU,EAAE,MAAM;aACnB,IAEA,KAAK,CACD,CACF,CACR,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAE5B,MAAM,UAAU,KAAK,CAAC,EACpB,KAAK,EACL,QAAQ,GAAG,QAAQ,EACnB,IAAI,GAAG,MAAM,EACb,KAAK,EACL,IAAI,GAAG,IAAI,EACX,SAAS,EACT,SAAS,GAAG,OAAO,EACnB,UAAU,GAAG,MAAM,EACnB,QAAQ,GAAG,MAAM,GACN;IACX,IAAI,KAAK,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC/B,OAAO,CAAC,IAAI,CAAC,4DAA4D,CAAC,CAAC;IAC7E,CAAC;IACD,MAAM,UAAU,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAM,CAAC,CAAC,CAAC,IAAI,CAAC;IAErD,SAAS,UAAU;QACjB,IAAI,SAAS,IAAI,SAAS,CAAC,IAAI,EAAE,CAAC;YAChC,OAAO,CACL,oBAAC,GAAG,IAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC7B,oBAAC,IAAI,kBAAC,KAAK,EAAE,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,EAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,IAAM,SAAS,IAAE,IAAI,EAAE,IAAI,IAAI,CACtF,CACP,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;IAED,SAAS,WAAW;QAClB,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,IACnD,KAAK,CACD,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,oBAAC,GAAG,IACF,UAAU,EAAC,UAAU,EACrB,SAAS,EAAE,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EACrF,KAAK,EAAE,UAAU,EACjB,SAAS,EAAC,KAAK,EACf,MAAM,EAAC,aAAa,EACpB,cAAc,EAAC,QAAQ,EACvB,UAAU,EAAE,CAAC,EACb,SAAS,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACtC,QAAQ,EAAE,CAAC,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,IAAI,CAAC,CAAC,IAAI,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACxF,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAC,aAAa;QAElB,UAAU,EAAE;QACZ,WAAW,EAAE,CACV,CACP,CAAC;AACJ,CAAC"}

package/dist/Banner.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { BannerProps } from "./Common";
 export declare const hideBanner: (id: string) => Promise<void>;
-export declare const Banner: ({ id, text, subtext, color, iconName, textColor, negativeXMargin, width, shape, type, onClick, }: BannerProps) => React.ReactElement | null;
+export declare const Banner: ({ id, customButtonProps, text, subtext, color, iconName, textColor, negativeXMargin, width, shape, type, onClick, }: BannerProps) => React.ReactElement | null;

package/dist/Banner.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Box } from "./Box";
+import { Button } from "./Button";
 import { Icon } from "./Icon";
 import { IconButton } from "./IconButton";
 import { Text } from "./Text";
@@ -11,39 +12,54 @@ export const hideBanner = (id) => {
     console.debug(`[banner] Hiding ${getKey(id)} `);
     return Unifier.storage.setItem(getKey(id), "true");
 };
-export const Banner = ({ id, text, subtext, color = "secondaryDark", iconName, textColor = "white", negativeXMargin = 0, width, shape, type = "dismiss", onClick, }) => {
-    // If the banner is permanent, show it immediately.
-    const [show, setShow] = useState(type === "permanent");
+const BannerType = {
+    ACTION: "action",
+    DISMISS: "dismiss",
+    PERMANENT: "permanent", // deprecated in favor of default behavior
+    CUSTOM_BUTTON: "customButton",
+};
+export const Banner = ({ id, customButtonProps, text, subtext, color = "secondaryDark", iconName, textColor = "white", negativeXMargin = 0, width, shape, type, onClick, }) => {
+    // If the banner is not type dismiss, show it immediately.
+    const { ACTION, DISMISS, CUSTOM_BUTTON } = BannerType;
+    const [show, setShow] = useState(type !== DISMISS);
     // Load seen from async storage.
     useEffect(() => {
-        // Always show permanent banners.
-        if (type === "permanent") {
-            return;
+        if (type === DISMISS) {
+            void Unifier.storage.getItem(getKey(id)).then((isSeen) => {
+                console.debug(`[banner] ${getKey(id)} seen? ${isSeen}`);
+                setShow(!isSeen);
+            });
         }
-        void Unifier.storage.getItem(getKey(id)).then((isSeen) => {
-            console.debug(`[banner] ${getKey(id)} seen? ${isSeen}`);
-            setShow(!isSeen);
-        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [id, type]);
     const dismiss = async () => {
-        if (type === "permanent") {
+        if (type !== DISMISS) {
             return;
         }
         await hideBanner(id);
         setShow(false);
     };
     const renderButton = () => {
-        if (type === "permanent") {
+        var _a, _b, _c;
+        if (type === CUSTOM_BUTTON) {
+            return (React.createElement(Button, Object.assign({}, customButtonProps, { color: (_a = customButtonProps === null || customButtonProps === void 0 ? void 0 : customButtonProps.color) !== null && _a !== void 0 ? _a : "primary", size: (_b = customButtonProps === null || customButtonProps === void 0 ? void 0 : customButtonProps.size) !== null && _b !== void 0 ? _b : "sm", text: (_c = customButtonProps === null || customButtonProps === void 0 ? void 0 : customButtonProps.text) !== null && _c !== void 0 ? _c : "", onClick: onClick })));
+        }
+        else if (type === ACTION) {
+            return (React.createElement(Box, { alignItems: "center", display: "block", justifyContent: "center", width: 40 },
+                React.createElement(IconButton, { accessibilityLabel: "", icon: "arrow-right", iconColor: textColor, prefix: "fas", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick() })));
+        }
+        else if (type === DISMISS) {
+            return (React.createElement(Box, { alignItems: "center", display: "block", justifyContent: "center", width: 40 },
+                React.createElement(IconButton, { accessibilityLabel: "", icon: "times-circle", iconColor: textColor, prefix: "fas", onClick: dismiss })));
+        }
+        else {
             return null;
         }
-        return (React.createElement(Box, { alignItems: "center", display: "block", justifyContent: "center", width: 40 },
-            type === "dismiss" && (React.createElement(IconButton, { accessibilityLabel: "", icon: "times-circle", iconColor: textColor, prefix: "fas", onClick: dismiss })),
-            type === "action" && (React.createElement(IconButton, { accessibilityLabel: "", icon: "arrow-right", iconColor: textColor, prefix: "fas", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick() }))));
     };
     if (!show) {
         return null;
     }
-    if (type === "action" && !onClick) {
+    if ((type === ACTION && !onClick) || (type === CUSTOM_BUTTON && !onClick)) {
         console.warn("Banners with type action require an onClick property.");
     }
     const negativeMargin = negativeXMargin * -4;
@@ -52,8 +68,8 @@ export const Banner = ({ id, text, subtext, color = "secondaryDark", iconName, t
                 marginLeft: negativeMargin,
                 marginRight: negativeMargin,
             },
-        }, direction: "row", justifyContent: "between", paddingX: 3, paddingY: 2, rounding: shape, shadow: true, width: width || Unifier.utils.dimensions().width || "100%", onClick: type === "permanent" ? undefined : dismiss },
-        iconName && (React.createElement(Box, { justifyContent: "center", marginRight: 2, width: 32 },
+        }, direction: "row", justifyContent: "between", paddingX: 3, paddingY: 2, rounding: shape, shadow: true, width: width || Unifier.utils.dimensions().width || "100%", onClick: type === DISMISS ? dismiss : undefined },
+        iconName && (React.createElement(Box, { justifyContent: "center", width: 32 },
             React.createElement(Icon, { color: textColor, name: iconName, size: "lg" }))),
         React.createElement(Box, { alignItems: "center", direction: "column", flex: "shrink", justifyContent: "center" },
             React.createElement(Box, { paddingY: 1 },

package/dist/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../src/Banner.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../src/Banner.tsx"],"names":[],"mappings":"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"}

package/dist/Button.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { ButtonProps } from "./Common";
-export declare function Button({ disabled, type, loading: propsLoading, children, text, inline, icon, iconPrefix, size, onClick, color, withConfirmation, confirmationText, confirmationHeading, shape, testID, tooltip, }: ButtonProps): React.JSX.Element;
+export declare function Button({ alignSelf, disabled, type, loading: propsLoading, children, text, inline, icon, iconPrefix, size, onClick, color, withConfirmation, confirmationText, confirmationHeading, shape, testID, tooltip, }: ButtonProps): React.JSX.Element;

package/dist/Button.js

@@ -23,11 +23,12 @@ const buttonTextColor = {
     google: "white",
 };
 const HEIGHTS = {
+    xs: 30,
     sm: 36,
     md: 40,
     lg: 48,
 };
-export function Button({ disabled = false, type = "solid", loading: propsLoading, children, text, inline = false, icon, iconPrefix, size = "md", onClick, color = "gray", withConfirmation = false, confirmationText = "Are you sure you want to continue?", confirmationHeading = "Confirm", shape = "rounded", testID, tooltip, }) {
+export function Button({ alignSelf, disabled = false, type = "solid", loading: propsLoading, children, text, inline = false, icon, iconPrefix, size = "md", onClick, color = "gray", withConfirmation = false, confirmationText = "Are you sure you want to continue?", confirmationHeading = "Confirm", shape = "rounded", testID, tooltip, }) {
     const [loading, setLoading] = useState(propsLoading);
     const [showConfirmation, setShowConfirmation] = useState(false);
     const { theme } = useContext(ThemeContext);
@@ -71,7 +72,7 @@ export function Button({ disabled = false, type = "solid", loading: propsLoading
             React.createElement(Text, null, confirmationText)));
     };
     const renderButton = () => {
-        return (React.createElement(View, null,
+        return (React.createElement(View, { style: { alignSelf: inline === true ? undefined : alignSelf } },
             React.createElement(Pressable, { disabled: disabled || loading, style: {
                     alignSelf: inline === true ? undefined : "stretch",
                     height: HEIGHTS[size || "md"],
@@ -86,7 +87,7 @@ export function Button({ disabled = false, type = "solid", loading: propsLoading
                     borderWidth: type === "outline" ? 2 : 0,
                     opacity: disabled ? 0.4 : 1,
                     flexDirection: "row",
-                    paddingHorizontal: 8 * 2,
+                    paddingHorizontal: size === "xs" ? 6 : size === "sm" ? 12 : 8 * 2,
                 }, testID: testID, onPress: debounce(async () => {
                     await Unifier.utils.haptic();
                     setLoading(true);
@@ -104,10 +105,10 @@ export function Button({ disabled = false, type = "solid", loading: propsLoading
                     }
                     setLoading(false);
                 }, 500, { leading: true }) },
-                icon !== undefined && (React.createElement(Box, { paddingX: 2 },
-                    React.createElement(Icon, { color: getTextColor(color), name: icon, prefix: iconPrefix || "far", size: size }))),
+                icon !== undefined && (React.createElement(Box, { marginRight: 2 },
+                    React.createElement(Icon, { color: getTextColor(color), name: icon, prefix: iconPrefix || "far", size: size === "xs" ? "sm" : size }))),
                 Boolean(children) && children,
-                Boolean(text) && (React.createElement(Text, { align: "center", color: getTextColor(color), font: "button", inline: inline, size: size, skipLinking: true, weight: "bold" }, text)),
+                Boolean(text) && (React.createElement(Text, { align: "center", color: getTextColor(color), font: "button", inline: inline, size: size === "xs" ? "sm" : size, skipLinking: true, weight: "bold" }, text)),
                 Boolean(loading) && (React.createElement(Box, { marginLeft: 2 },
                     React.createElement(ActivityIndicator, { color: getTextColor(color), size: "small" })))),
             Boolean(withConfirmation) && renderConfirmation()));

package/dist/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"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"}

package/dist/Common.d.ts

@@ -1,7 +1,7 @@
 import { SaveFormat } from "expo-image-manipulator";
 import React, { ReactElement, ReactNode, SyntheticEvent } from "react";
 import { ListRenderItemInfo, StyleProp, ViewStyle } from "react-native";
-import { DimensionValue } from "react-native/Libraries/StyleSheet/StyleSheetTypes";
+import { DimensionValue, FlexStyle } from "react-native/Libraries/StyleSheet/StyleSheetTypes";
 import { Styles } from "react-native-google-places-autocomplete";
 import { SelectListOptions } from "./SelectList";
 export interface BaseProfile {
@@ -114,7 +114,7 @@ export declare const SPACING = 4;
 export type TextFieldType = "date" | "datetime" | "decimal" | "decimalRange" | "email" | "height" | "password" | "phoneNumber" | "number" | "numberRange" | "search" | "text" | "time" | "url" | "username";
 export type IconSize = "xs" | "sm" | "md" | "lg" | "xl";
 export declare const iconSizeToNumber: (size?: IconSize) => number;
-export type TextSize = "sm" | "md" | "lg";
+export type TextSize = "xs" | "sm" | "md" | "lg";
 export type TextColor = "blue" | "darkGray" | "eggplant" | "gray" | "green" | "lightGray" | "maroon" | "midnight" | "navy" | "olive" | "orange" | "orchid" | "pine" | "purple" | "red" | "watermelon" | "white";
 export type ButtonColor = "blue" | "gray" | "red" | "white" | "primary" | "secondary" | "accent" | "tertiary";
 export type IconPrefix = "far" | "fas";
@@ -851,13 +851,19 @@ export interface AvatarProps {
     shouldShowEditIconIfNoImage?: boolean;
 }
 export interface BadgeProps {
-    title: string;
-    position?: "top" | "middle";
-    type?: "info" | "error" | "warning" | "success" | "neutral" | "custom";
     color?: AllColors;
+    fontColor?: AllColors;
+    fontWeight?: TextProps["weight"];
+    iconProps?: IconProps;
+    title?: string;
+    position?: "bottom" | "top" | "middle";
+    rounding?: Rounding;
+    size?: "xs" | "sm" | "md" | "lg";
+    type?: "info" | "error" | "warning" | "success" | "neutral" | "custom";
 }
 export interface BannerProps {
     id: string;
+    customButtonProps?: Partial<ButtonProps>;
     color?: BoxColor;
     dismissible?: boolean;
     iconName?: IconName;
@@ -867,7 +873,7 @@ export interface BannerProps {
     subtext?: string;
     text: string;
     textColor?: TextColor;
-    type?: "dismiss" | "action" | "permanent";
+    type?: "dismiss" | "action" | "permanent" | "customButton";
     width?: number | string;
 }
 export interface BodyProps {
@@ -879,12 +885,13 @@ export interface BodyProps {
     children?: ReactNode;
 }
 export interface ButtonProps {
+    alignSelf?: FlexStyle["alignSelf"];
     children?: React.ReactElement;
     text: string;
     color?: ButtonColor | Color;
     disabled?: boolean;
     inline?: boolean;
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg";
     type?: "solid" | "ghost" | "outline";
     loading?: boolean;
     onClick: any;
@@ -993,6 +1000,7 @@ export interface IconButtonProps {
         idealDirection?: TooltipDirection;
     };
     indicator?: boolean;
+    indicatorNumber?: number;
     indicatorStyle?: {
         position: IndicatorDirection;
         color: AllColors;

package/dist/IconButton.js

@@ -1,5 +1,6 @@
 import React, { forwardRef, useContext, useState } from "react";
 import { Platform, Pressable, View } from "react-native";
+import { Box } from "./Box";
 import { iconSizeToNumber } from "./Common";
 import { Icon } from "./Icon";
 import { Modal } from "./Modal";
@@ -8,7 +9,7 @@ import { ThemeContext } from "./Theme";
 import { Tooltip } from "./Tooltip";
 import { Unifier } from "./Unifier";
 // eslint-disable-next-line react/display-name
-export const IconButton = forwardRef(({ prefix, icon, iconColor, onClick, size, bgColor = "transparent", withConfirmation = false, confirmationText = "Are you sure you want to continue?", confirmationHeading = "Confirm", tooltip, indicator, indicatorStyle = { position: "bottomRight", color: "primary" }, testID, }, ref) => {
+export const IconButton = forwardRef(({ prefix, icon, iconColor, onClick, size, bgColor = "transparent", withConfirmation = false, confirmationText = "Are you sure you want to continue?", confirmationHeading = "Confirm", tooltip, indicator, indicatorNumber, indicatorStyle = { position: "bottomRight", color: "primary" }, testID, }, ref) => {
     const { theme } = useContext(ThemeContext);
     const [showConfirmation, setShowConfirmation] = useState(false);
     const opacity = 1;
@@ -29,6 +30,31 @@ export const IconButton = forwardRef(({ prefix, icon, iconColor, onClick, size,
         topLeft: { top: "20%", left: "20%" },
     };
     const indicatorPosition = Object.assign({ position: "absolute" }, IndicatorPosition[indicatorStyle.position]);
+    const IndicatorNumPosition = {
+        bottomRight: { bottom: "18%", right: "12%" },
+        bottomLeft: { bottom: "10%", left: "10%" },
+        topRight: { top: "-5%", right: "-5%" },
+        topLeft: { top: "10%", left: "10%" },
+    };
+    const numberIndicatorProps = Object.assign({ position: "absolute" }, IndicatorNumPosition[indicatorStyle.position]);
+    function renderIndicator() {
+        if (indicator && indicatorNumber && indicatorNumber > 0) {
+            return (React.createElement(View, { style: numberIndicatorProps },
+                React.createElement(Box, { alignItems: "center", color: indicatorStyle.color, dangerouslySetInlineStyle: {
+                        __style: {
+                            padding: indicatorNumber && indicatorNumber > 9 ? 2 : 0,
+                        },
+                    }, justifyContent: "center", minHeight: 15, minWidth: 15, rounding: "pill" },
+                    React.createElement(Text, { color: "white", size: "sm", weight: "bold" }, indicatorNumber))));
+        }
+        else if (indicator) {
+            return (React.createElement(View, { style: indicatorPosition },
+                React.createElement(Icon, { color: indicatorStyle.color, name: "circle", prefix: prefix || "fas", size: "sm" })));
+        }
+        else {
+            return null;
+        }
+    }
     const renderConfirmation = () => {
         return (React.createElement(Modal, { heading: confirmationHeading, primaryButtonOnClick: () => {
                 onClick();
@@ -63,8 +89,7 @@ export const IconButton = forwardRef(({ prefix, icon, iconColor, onClick, size,
                     }
                 } },
                 React.createElement(Icon, { color: iconColor, name: icon, prefix: prefix || "fas", size: size }),
-                indicator && (React.createElement(View, { style: indicatorPosition },
-                    React.createElement(Icon, { color: indicatorStyle.color, name: "circle", prefix: prefix || "fas", size: "sm" })))),
+                renderIndicator()),
             Boolean(withConfirmation) && renderConfirmation()));
     }
     // Only add for web. This doesn't make much sense for mobile,

package/dist/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../src/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAY,MAAM,cAAc,CAAC;AAElE,OAAO,EAAkB,gBAAgB,EAAC,MAAM,UAAU,CAAC;AAC3D,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AACrC,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAElC,8CAA8C;AAC9C,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,MAAM,EACN,IAAI,EACJ,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAO,GAAG,aAAa,EACvB,gBAAgB,GAAG,KAAK,EACxB,gBAAgB,GAAG,oCAAoC,EACvD,mBAAmB,GAAG,SAAS,EAC/B,OAAO,EACP,SAAS,EACT,cAAc,GAAG,EAAC,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,EAAC,EAC5D,MAAM,GACU,EAClB,GAAG,EACH,EAAE;IACF,MAAM,EAAC,KAAK,EAAC,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACzC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhE,MAAM,OAAO,GAAG,CAAC,CAAC;IAClB,IAAI,KAAa,CAAC;IAClB,IAAI,OAAO,KAAK,qBAAqB,EAAE,CAAC;QACtC,KAAK,GAAG,oBAAoB,CAAC;IAC/B,CAAC;SAAM,IAAI,OAAO,KAAK,aAAa,IAAI,CAAC,OAAO,EAAE,CAAC;QACjD,KAAK,GAAG,oBAAoB,CAAC;IAC/B,CAAC;SAAM,CAAC;QACN,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;IACzB,CAAC;IAED,MAAM,iBAAiB,GAAG;QACxB,WAAW,EAAE,EAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC;QAC1C,UAAU,EAAE,EAAC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAC;QACxC,QAAQ,EAAE,EAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC;QACpC,OAAO,EAAE,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAC;KACnC,CAAC;IAEF,MAAM,iBAAiB,mBAAI,QAAQ,EAAE,UAAU,IAAK,iBAAiB,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEhG,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,OAAO,CACL,oBAAC,KAAK,IACJ,OAAO,EAAE,mBAAmB,EAC5B,oBAAoB,EAAE,GAAG,EAAE;gBACzB,OAAO,EAAE,CAAC;gBACV,mBAAmB,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC,EACD,iBAAiB,EAAC,SAAS,EAC3B,sBAAsB,EAAE,GAAS,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAC9D,mBAAmB,EAAC,QAAQ,EAC5B,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,gBAAgB,EACzB,SAAS,EAAE,GAAS,EAAE;gBACpB,mBAAmB,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC;YAED,oBAAC,IAAI,QAAE,gBAAgB,CAAQ,CACzB,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,SAAS,gBAAgB;QACvB,OAAO,CACL;YACE,oBAAC,SAAS,IACR,GAAG,EAAE,GAAU,EACf,OAAO,EAAE,EAAC,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAC,EACnD,KAAK,EAAE;oBACL,OAAO;oBACP,eAAe,EAAE,KAAK;oBACtB,YAAY,EAAE,GAAG;oBACjB,6CAA6C;oBAC7C,0CAA0C;oBAC1C,2CAA2C;oBAC3C,4CAA4C;oBAC5C,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,GAAG;oBACnC,MAAM,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,GAAG;oBACpC,OAAO,EAAE,MAAM;oBACf,cAAc,EAAE,QAAQ;oBACxB,UAAU,EAAE,QAAQ;iBACrB,EACD,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,KAAK,IAAI,EAAE;oBAClB,MAAM,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;oBAC7B,IAAI,gBAAgB,IAAI,CAAC,gBAAgB,EAAE,CAAC;wBAC1C,mBAAmB,CAAC,IAAI,CAAC,CAAC;oBAC5B,CAAC;yBAAM,IAAI,OAAO,EAAE,CAAC;wBACnB,OAAO,EAAE,CAAC;oBACZ,CAAC;gBACH,CAAC;gBAED,oBAAC,IAAI,IAAC,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,IAAI,KAAK,EAAE,IAAI,EAAE,IAAI,GAAI;gBAC1E,SAAS,IAAI,CACZ,oBAAC,IAAI,IAAC,KAAK,EAAE,iBAA8B;oBACzC,oBAAC,IAAI,IACH,KAAK,EAAE,cAAc,CAAC,KAAK,EAC3B,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,MAAM,IAAI,KAAK,EACvB,IAAI,EAAC,IAAI,GACT,CACG,CACR,CACS;YAEX,OAAO,CAAC,gBAAgB,CAAC,IAAI,kBAAkB,EAAE,CACjD,CACJ,CAAC;IACJ,CAAC;IAED,6DAA6D;IAC7D,6FAA6F;IAC7F,6DAA6D;IAC7D,IAAI,OAAO,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,EAAE,CAAC;QACrC,OAAO,CACL,oBAAC,OAAO,IAAC,cAAc,EAAE,OAAO,CAAC,cAAc,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,IAChE,gBAAgB,EAAE,CACX,CACX,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,gBAAgB,EAAE,CAAC;IAC5B,CAAC;AACH,CAAC,CACF,CAAC"}
+{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../src/IconButton.tsx"],"names":[],"mappings":"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"}

package/dist/Text.js

@@ -3,6 +3,7 @@ import { Text as NativeText } from "react-native";
 import { Hyperlink } from "./Hyperlink";
 import { ThemeContext } from "./Theme";
 const fontSizes = {
+    xs: 10,
     sm: 12,
     md: 14,
     lg: 16,

package/dist/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.39.5",
+  "version": "0.39.6",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {

package/src/Badge.tsx

@@ -1,48 +1,66 @@
-import React, {useContext} from "react";
-import {Text, View} from "react-native";
+import React from "react";
 
+import {Box} from "./Box";
 import {BadgeProps} from "./Common";
-import {ThemeContext} from "./Theme";
+import {Icon} from "./Icon";
+import {Text} from "./Text";
 
 export function Badge({
   title,
   position = "middle",
   type = "info",
   color,
+  size = "xs",
+  iconProps,
+  fontColor = "white",
+  fontWeight = "bold",
+  rounding = "pill",
 }: BadgeProps): React.ReactElement {
-  const {theme} = useContext(ThemeContext);
-
   if (color && type !== "custom") {
     console.warn('Badge color only supported when `type` is set to "custom".');
   }
   const badgeColor = type === "custom" ? color! : type;
 
-  return (
-    <View
-      style={{
-        backgroundColor: theme[badgeColor],
-        borderRadius: 2,
-        height: 14,
-        paddingTop: 2,
-        paddingBottom: 2,
-        paddingLeft: 4,
-        paddingRight: 4,
-        marginTop: -4,
-        marginLeft: 4,
-        display: "flex",
-        alignSelf: position === "middle" ? "center" : "flex-start",
-      }}
-    >
-      <Text
-        style={{
-          fontSize: 10,
-          flexWrap: "nowrap",
-          color: "white",
-          fontWeight: "bold",
-        }}
-      >
+  function renderIcon(): React.ReactElement | null {
+    if (iconProps && iconProps.name) {
+      return (
+        <Box marginRight={title ? 1 : 0}>
+          <Icon color={iconProps?.color ? iconProps.color : fontColor} {...iconProps} size={size} />
+        </Box>
+      );
+    } else {
+      return null;
+    }
+  }
+
+  function renderLabel(): React.ReactElement | null {
+    if (!title) {
+      return null;
+    }
+    return (
+      <Text color={fontColor} size={size} weight={fontWeight}>
         {title}
       </Text>
-    </View>
+    );
+  }
+
+  return (
+    <Box
+      alignItems="baseline"
+      alignSelf={position === "middle" ? "center" : position === "bottom" ? "end" : "start"}
+      color={badgeColor}
+      direction="row"
+      height="min-content"
+      justifyContent="center"
+      marginLeft={1}
+      marginTop={position === "top" ? -1 : 0}
+      paddingX={(typeof rounding === "number" && rounding >= 4) || rounding === "pill" ? 2 : 1}
+      paddingY={1}
+      rounding={rounding}
+      width="max-content"
+    >
+      {renderIcon()}
+      {renderLabel()}
+    </Box>
   );
 }

package/src/Banner.tsx

@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from "react";
 
 import {Box} from "./Box";
+import {Button} from "./Button";
 import {BannerProps, ButtonColor} from "./Common";
 import {Icon} from "./Icon";
 import {IconButton} from "./IconButton";
@@ -16,8 +17,16 @@ export const hideBanner = (id: string): Promise<void> => {
   return Unifier.storage.setItem(getKey(id), "true");
 };
 
+const BannerType = {
+  ACTION: "action",
+  DISMISS: "dismiss",
+  PERMANENT: "permanent", // deprecated in favor of default behavior
+  CUSTOM_BUTTON: "customButton",
+};
+
 export const Banner = ({
   id,
+  customButtonProps,
   text,
   subtext,
   color = "secondaryDark",
@@ -26,27 +35,25 @@ export const Banner = ({
   negativeXMargin = 0,
   width,
   shape,
-  type = "dismiss",
+  type,
   onClick,
 }: BannerProps): React.ReactElement | null => {
-  // If the banner is permanent, show it immediately.
-  const [show, setShow] = useState(type === "permanent");
-
+  // If the banner is not type dismiss, show it immediately.
+  const {ACTION, DISMISS, CUSTOM_BUTTON} = BannerType;
+  const [show, setShow] = useState(type !== DISMISS);
   // Load seen from async storage.
   useEffect(() => {
-    // Always show permanent banners.
-    if (type === "permanent") {
-      return;
+    if (type === DISMISS) {
+      void Unifier.storage.getItem(getKey(id)).then((isSeen) => {
+        console.debug(`[banner] ${getKey(id)} seen? ${isSeen}`);
+        setShow(!isSeen);
+      });
     }
-
-    void Unifier.storage.getItem(getKey(id)).then((isSeen) => {
-      console.debug(`[banner] ${getKey(id)} seen? ${isSeen}`);
-      setShow(!isSeen);
-    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, type]);
 
   const dismiss = async (): Promise<void> => {
-    if (type === "permanent") {
+    if (type !== DISMISS) {
       return;
     }
     await hideBanner(id);
@@ -54,38 +61,50 @@ export const Banner = ({
   };
 
   const renderButton = (): React.ReactElement | null => {
-    if (type === "permanent") {
-      return null;
-    }
-    return (
-      <Box alignItems="center" display="block" justifyContent="center" width={40}>
-        {type === "dismiss" && (
+    if (type === CUSTOM_BUTTON) {
+      return (
+        <Button
+          {...customButtonProps}
+          color={customButtonProps?.color ?? "primary"}
+          size={customButtonProps?.size ?? "sm"}
+          text={customButtonProps?.text ?? ""}
+          onClick={onClick}
+        />
+      );
+    } else if (type === ACTION) {
+      return (
+        <Box alignItems="center" display="block" justifyContent="center" width={40}>
           <IconButton
             accessibilityLabel=""
-            icon="times-circle"
+            icon="arrow-right"
             iconColor={textColor as ButtonColor}
             prefix="fas"
-            onClick={dismiss}
+            onClick={(): void => onClick?.()}
           />
-        )}
-        {type === "action" && (
+        </Box>
+      );
+    } else if (type === DISMISS) {
+      return (
+        <Box alignItems="center" display="block" justifyContent="center" width={40}>
           <IconButton
             accessibilityLabel=""
-            icon="arrow-right"
+            icon="times-circle"
             iconColor={textColor as ButtonColor}
             prefix="fas"
-            onClick={(): void => onClick?.()}
+            onClick={dismiss}
           />
-        )}
-      </Box>
-    );
+        </Box>
+      );
+    } else {
+      return null;
+    }
   };
 
   if (!show) {
     return null;
   }
 
-  if (type === "action" && !onClick) {
+  if ((type === ACTION && !onClick) || (type === CUSTOM_BUTTON && !onClick)) {
     console.warn("Banners with type action require an onClick property.");
   }
 
@@ -107,10 +126,10 @@ export const Banner = ({
       rounding={shape}
       shadow
       width={width || Unifier.utils.dimensions().width || "100%"}
-      onClick={type === "permanent" ? undefined : dismiss}
+      onClick={type === DISMISS ? dismiss : undefined}
     >
       {iconName && (
-        <Box justifyContent="center" marginRight={2} width={32}>
+        <Box justifyContent="center" width={32}>
           <Icon color={textColor} name={iconName} size="lg" />
         </Box>
       )}

package/src/Button.tsx

@@ -27,12 +27,14 @@ const buttonTextColor: {[buttonColor: string]: "white" | "darkGray"} = {
 };
 
 const HEIGHTS = {
+  xs: 30,
   sm: 36,
   md: 40,
   lg: 48,
 };
 
 export function Button({
+  alignSelf,
   disabled = false,
   type = "solid",
   loading: propsLoading,
@@ -109,7 +111,7 @@ export function Button({
 
   const renderButton = () => {
     return (
-      <View>
+      <View style={{alignSelf: inline === true ? undefined : alignSelf}}>
         <Pressable
           disabled={disabled || loading}
           style={{
@@ -126,7 +128,7 @@ export function Button({
             borderWidth: type === "outline" ? 2 : 0,
             opacity: disabled ? 0.4 : 1,
             flexDirection: "row",
-            paddingHorizontal: 8 * 2,
+            paddingHorizontal: size === "xs" ? 6 : size === "sm" ? 12 : 8 * 2,
           }}
           testID={testID}
           onPress={debounce(
@@ -150,12 +152,12 @@ export function Button({
           )}
         >
           {icon !== undefined && (
-            <Box paddingX={2}>
+            <Box marginRight={2}>
               <Icon
                 color={getTextColor(color as Color)}
                 name={icon}
                 prefix={iconPrefix || "far"}
-                size={size}
+                size={size === "xs" ? "sm" : size}
               />
             </Box>
           )}
@@ -166,7 +168,7 @@ export function Button({
               color={getTextColor(color as Color)}
               font="button"
               inline={inline}
-              size={size}
+              size={size === "xs" ? "sm" : size}
               skipLinking
               weight="bold"
             >

package/src/Common.ts

@@ -1,7 +1,7 @@
 import {SaveFormat} from "expo-image-manipulator";
 import React, {ReactElement, ReactNode, SyntheticEvent} from "react";
 import {ListRenderItemInfo, StyleProp, ViewStyle} from "react-native";
-import {DimensionValue} from "react-native/Libraries/StyleSheet/StyleSheetTypes";
+import {DimensionValue, FlexStyle} from "react-native/Libraries/StyleSheet/StyleSheetTypes";
 import {Styles} from "react-native-google-places-autocomplete";
 
 import {SelectListOptions} from "./SelectList";
@@ -1706,7 +1706,7 @@ export const iconSizeToNumber = (size?: IconSize) => {
   }[size || "md"];
 };
 
-export type TextSize = "sm" | "md" | "lg";
+export type TextSize = "xs" | "sm" | "md" | "lg";
 export type TextColor =
   | "blue"
   | "darkGray"
@@ -2585,19 +2585,25 @@ export interface AvatarProps {
 }
 
 export interface BadgeProps {
+  // If `type` is set to "custom", a custom theme color should be provided.
+  color?: AllColors;
+  fontColor?: AllColors; // default "white"
+  fontWeight?: TextProps["weight"]; // default "bold"
+  iconProps?: IconProps;
   // The text to display inside the badge.
-  title: string;
+  title?: string;
   // Position relative to the text. Top should only be used with headings.
-  position?: "top" | "middle"; // default "middle"
+  position?: "bottom" | "top" | "middle"; // default "middle"
+  rounding?: Rounding;
+  size?: "xs" | "sm" | "md" | "lg"; // default "xs'
   // Some default badge types. Occasionally, a custom badge might be required for different color
   // schemes.
   type?: "info" | "error" | "warning" | "success" | "neutral" | "custom"; // default "info
-  // If `type` is set to "custom", a custom theme color should be provided.
-  color?: AllColors;
 }
 
 export interface BannerProps {
   id: string;
+  customButtonProps?: Partial<ButtonProps>;
   color?: BoxColor;
   dismissible?: boolean;
   iconName?: IconName;
@@ -2607,7 +2613,7 @@ export interface BannerProps {
   subtext?: string;
   text: string;
   textColor?: TextColor;
-  type?: "dismiss" | "action" | "permanent";
+  type?: "dismiss" | "action" | "permanent" /* deprectiated */ | "customButton";
   width?: number | string;
 }
 
@@ -2621,6 +2627,7 @@ export interface BodyProps {
 }
 
 export interface ButtonProps {
+  alignSelf?: FlexStyle["alignSelf"];
   children?: React.ReactElement;
   text: string;
   // TODO make this work for all colors
@@ -2628,7 +2635,7 @@ export interface ButtonProps {
   // default gray
   disabled?: boolean; // default false
   inline?: boolean; // default false
-  size?: "sm" | "md" | "lg"; // default md
+  size?: "xs" | "sm" | "md" | "lg"; // default md
   type?: "solid" | "ghost" | "outline"; // default solid
   loading?: boolean;
   onClick: any;
@@ -2769,6 +2776,7 @@ export interface IconButtonProps {
     idealDirection?: TooltipDirection;
   };
   indicator?: boolean;
+  indicatorNumber?: number;
   indicatorStyle?: {position: IndicatorDirection; color: AllColors};
   testID?: string;
 }

package/src/IconButton.tsx

@@ -1,6 +1,7 @@
 import React, {forwardRef, useContext, useState} from "react";
 import {Platform, Pressable, View, ViewStyle} from "react-native";
 
+import {Box} from "./Box";
 import {IconButtonProps, iconSizeToNumber} from "./Common";
 import {Icon} from "./Icon";
 import {Modal} from "./Modal";
@@ -24,6 +25,7 @@ export const IconButton = forwardRef(
       confirmationHeading = "Confirm",
       tooltip,
       indicator,
+      indicatorNumber,
       indicatorStyle = {position: "bottomRight", color: "primary"},
       testID,
     }: IconButtonProps,
@@ -51,6 +53,52 @@ export const IconButton = forwardRef(
 
     const indicatorPosition = {position: "absolute", ...IndicatorPosition[indicatorStyle.position]};
 
+    const IndicatorNumPosition = {
+      bottomRight: {bottom: "18%", right: "12%"},
+      bottomLeft: {bottom: "10%", left: "10%"},
+      topRight: {top: "-5%", right: "-5%"},
+      topLeft: {top: "10%", left: "10%"},
+    };
+
+    const numberIndicatorProps = {
+      position: "absolute",
+      ...IndicatorNumPosition[indicatorStyle.position],
+    };
+
+    function renderIndicator(): React.ReactElement | null {
+      if (indicator && indicatorNumber && indicatorNumber > 0) {
+        return (
+          <View style={numberIndicatorProps as ViewStyle}>
+            <Box
+              alignItems="center"
+              color={indicatorStyle.color}
+              dangerouslySetInlineStyle={{
+                __style: {
+                  padding: indicatorNumber && indicatorNumber > 9 ? 2 : 0,
+                },
+              }}
+              justifyContent="center"
+              minHeight={15}
+              minWidth={15}
+              rounding="pill"
+            >
+              <Text color="white" size="sm" weight="bold">
+                {indicatorNumber}
+              </Text>
+            </Box>
+          </View>
+        );
+      } else if (indicator) {
+        return (
+          <View style={indicatorPosition as ViewStyle}>
+            <Icon color={indicatorStyle.color} name="circle" prefix={prefix || "fas"} size="sm" />
+          </View>
+        );
+      } else {
+        return null;
+      }
+    }
+
     const renderConfirmation = () => {
       return (
         <Modal
@@ -104,16 +152,7 @@ export const IconButton = forwardRef(
             }}
           >
             <Icon color={iconColor} name={icon} prefix={prefix || "fas"} size={size} />
-            {indicator && (
-              <View style={indicatorPosition as ViewStyle}>
-                <Icon
-                  color={indicatorStyle.color}
-                  name="circle"
-                  prefix={prefix || "fas"}
-                  size="sm"
-                />
-              </View>
-            )}
+            {renderIndicator()}
           </Pressable>
 
           {Boolean(withConfirmation) && renderConfirmation()}

package/src/Text.tsx

@@ -6,6 +6,7 @@ import {Hyperlink} from "./Hyperlink";
 import {ThemeContext} from "./Theme";
 
 const fontSizes = {
+  xs: 10,
   sm: 12,
   md: 14,
   lg: 16,