> = ({
+ size = 'md',
+ color = 'neutral',
+ iconBefore,
+ iconAfter,
+ className,
+ childClassName,
+ children,
+ disabled = false,
+ focusable = false,
+ hoverable = false,
+ iconSize,
+ ariaLabel,
+}) => {
+ const sizeClass = useMemo(() => {
+ switch (size) {
+ case 'xs':
+ return 'px-2 py-0 text-[10px] leading-tight';
+ case 'sm':
+ return 'px-2 py-0.5 text-[10px] leading-tight';
+ case 'md':
+ return 'px-2.5 py-0.5 text-[11px] leading-normal';
+ case 'lg':
+ return 'px-3 py-[0.1875rem] text-[12px] leading-normal';
+ }
+ }, [size]);
+
+ const childClass = useMemo(() => {
+ switch (size) {
+ case 'xs':
+ case 'sm':
+ return 'leading-[18px]';
+ case 'md':
+ case 'lg':
+ return 'leading-[20px]';
+ }
+ }, [size]);
+
+ const colorClass = useMemo(() => {
+ switch (color) {
+ case 'neutral':
+ return 'text-neutral-900 dark:text-neutral-400';
+ case 'violet':
+ return 'text-violet-400';
+ case 'orange':
+ return 'text-orange-600';
+ case 'yellow':
+ return 'text-yellow-600';
+ case 'green':
+ return 'text-green-600';
+ case 'blue':
+ return 'text-blue-600';
+ case 'pink':
+ return 'text-pink-600';
+ case 'red':
+ return 'text-orange-700';
+ }
+ }, [color]);
+
+ const computedIconSize = iconSize ?? defaultIconSizeByBadgeSize[size];
+
+ return (
+
+ {iconBefore ? : null}
+
+ {children}
+
+ {iconAfter ? : null}
+
+ );
+};
+
+export default Badge;
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
new file mode 100644
index 0000000000..f2b3f6c8a4
--- /dev/null
+++ b/src/components/ui/Button.tsx
@@ -0,0 +1,125 @@
+import React, { PropsWithChildren, ReactNode } from 'react';
+import cn from 'src/utilities/cn';
+import { ColorClass, ColorThemeSet } from './colors';
+import IconSlot from './IconSlot';
+
+export type ButtonType = 'priority' | 'primary' | 'secondary';
+
+type ButtonSize = 'lg' | 'md' | 'sm' | 'xs';
+
+export type ButtonPropsBase = {
+ /**
+ * The type of button: priority, primary, or secondary.
+ */
+ variant?: ButtonType;
+ /**
+ * The button size: lg, sm, or xs. Leave empty for md.
+ */
+ size?: ButtonSize;
+ /**
+ * An icon element to render on the left side of the button label. Pass a Heroicon
+ * (e.g. ``) or an Ably glyph (``) unsized — the
+ * button sizes it.
+ */
+ leftIcon?: ReactNode;
+ /**
+ * An icon element to render on the right side of the button label. See `leftIcon`.
+ */
+ rightIcon?: ReactNode;
+ /**
+ * Optional classes to add to the button element.
+ */
+ className?: string;
+ /**
+ * Optional color to apply to the icon on either left and/or right side of the button.
+ */
+ iconColor?: ColorClass | ColorThemeSet;
+};
+
+type ButtonProps = ButtonPropsBase & React.ButtonHTMLAttributes;
+
+// got to go the long way round because of ol' mate Taily Waily
+const buttonClasses: Record> = {
+ priority: {
+ lg: 'ui-button-priority-lg',
+ md: 'ui-button-priority',
+ sm: 'ui-button-priority-sm',
+ xs: 'ui-button-priority-xs',
+ },
+ primary: {
+ lg: 'ui-button-primary-lg',
+ md: 'ui-button-primary',
+ sm: 'ui-button-primary-sm',
+ xs: 'ui-button-primary-xs',
+ },
+ secondary: {
+ lg: 'ui-button-secondary-lg',
+ md: 'ui-button-secondary',
+ sm: 'ui-button-secondary-sm',
+ xs: 'ui-button-secondary-xs',
+ },
+};
+
+export const iconModifierClasses: Record = {
+ lg: { left: 'ui-button-lg-left-icon', right: 'ui-button-lg-right-icon' },
+ md: { left: 'ui-button-left-icon', right: 'ui-button-right-icon' },
+ sm: { left: 'ui-button-sm-left-icon', right: 'ui-button-sm-right-icon' },
+ xs: { left: '', right: '' },
+};
+
+export const commonButtonProps = (props: ButtonPropsBase) => {
+ const { variant = 'primary', size, leftIcon, rightIcon, className } = props;
+
+ return {
+ className: cn(
+ buttonClasses[variant][size ?? 'md'],
+ { [iconModifierClasses[size ?? 'md'].left]: leftIcon },
+ { [iconModifierClasses[size ?? 'md'].right]: rightIcon },
+ className,
+ ),
+ };
+};
+
+// Per-size icon dimensions, matching the `[&>svg]:!w-6/5/4` rules the button base classes
+// applied to a direct