From bbab7a201f45aa52be3b2176ec62ca607b6d819e Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 13 Jul 2026 13:11:46 -0400 Subject: [PATCH 1/2] fix(ui): Actions border radius consistency --- packages/ui/src/elements/Actions.tsx | 82 +--------------------------- 1 file changed, 2 insertions(+), 80 deletions(-) diff --git a/packages/ui/src/elements/Actions.tsx b/packages/ui/src/elements/Actions.tsx index 39fa68d32ac..9eb2f9bf73b 100644 --- a/packages/ui/src/elements/Actions.tsx +++ b/packages/ui/src/elements/Actions.tsx @@ -1,7 +1,7 @@ import React from 'react'; import type { LocalizationKey } from '../customizables'; -import { Button, Col, descriptors, Flex, Icon, SimpleButton, Spinner, useLocalizations } from '../customizables'; +import { Button, Col, descriptors, Flex, Icon, Spinner, useLocalizations } from '../customizables'; import type { ElementDescriptor, ElementId } from '../customizables/elementDescriptors'; import { useCardState } from '../elements/contexts'; import { useLoadingStatus } from '../hooks'; @@ -43,84 +43,6 @@ type ActionProps = Omit, 'label'> & { spinnerSize?: PropsOfComponent['size']; }; -export const ExtraSmallAction = (props: Omit) => { - const card = useCardState(); - const status = useLoadingStatus(); - const { - icon, - onClick: onClickProp, - iconElementDescriptor, - sx, - iconElementId, - iconSx, - iconBoxElementDescriptor, - iconBoxElementId, - iconBoxSx, - trailing, - spinnerSize, - ...rest - } = props; - - const onClick: React.MouseEventHandler = async e => { - card.setLoading(); - status.setLoading(); - try { - await onClickProp?.(e); - } finally { - card.setIdle(); - status.setIdle(); - } - }; - - return ( - ({ - borderRadius: t.radii.$lg, - gap: 0, - justifyContent: 'center', - padding: t.space.$1, - }), - sx, - ]} - isDisabled={card.isLoading} - onClick={onClick} - {...rest} - > - - {status.isLoading ? ( - - ) : ( - ({ - width: theme.sizes.$4, - height: theme.sizes.$4, - }), - iconSx, - ]} - /> - )} - - {trailing} - - ); -}; - export const SmallAction = (props: ActionProps) => { const { sx, iconBoxSx, iconSx, ...rest } = props; return ( @@ -130,7 +52,7 @@ export const SmallAction = (props: ActionProps) => { textVariant='buttonSmall' sx={[ t => ({ - borderRadius: t.radii.$lg, + borderRadius: t.radii.$md, gap: t.space.$0x5, justifyContent: 'center', flex: '1 1 0', From 7765c988bbd849f7f7abded5ad6613520d60dc51 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 13 Jul 2026 13:15:34 -0400 Subject: [PATCH 2/2] add changeset --- .changeset/kind-cooks-brush.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/kind-cooks-brush.md diff --git a/.changeset/kind-cooks-brush.md b/.changeset/kind-cooks-brush.md new file mode 100644 index 00000000000..883de2b98d9 --- /dev/null +++ b/.changeset/kind-cooks-brush.md @@ -0,0 +1,5 @@ +--- +'@clerk/ui': patch +--- + +Fix small actions button border radius to ensure consistency.