getsentry · natemoo-re · May 4, 2026 · May 4, 2026 · May 4, 2026 · May 4, 2026
@@ -30,7 +30,7 @@ function NoteHeader({authorName, user, onEdit, onDelete}: Props) {
           triggerProps={{
             size: 'xs',
             showChevron: false,
-            priority: 'transparent',
+            variant: 'transparent',
             icon: <IconEllipsis />,
             'aria-label': t('Comment Actions'),
           }}

diff --git a/static/app/components/clippedBox.stories.tsx b/static/app/components/clippedBox.stories.tsx
@@ -52,7 +52,7 @@ export default Storybook.story('ClippedBox', story => {
       render={ClippedBox}
       propMatrix={{
         btnText: ['Custom Label'],
-        buttonProps: [undefined, {priority: 'danger'}],
+        buttonProps: [undefined, {variant: 'danger'}],
         clipHeight: [100],
         clipFade: [
           undefined,

@@ -14,8 +14,8 @@ figma.connect(
   'https://www.figma.com/design/eTJz6aPgudMY9E6mzyZU0B/%F0%9F%90%A6-Components?node-id=384-2119&t=pFp9KphF6dQ7XjDm-0',
   {
     props: {
-      priority: figma.enum('priority', {
-        default: 'default',
+      variant: figma.enum('priority', {
+        default: 'secondary',
         primary: 'primary',
         danger: 'danger',
         warning: 'warning',
@@ -34,7 +34,7 @@ figma.connect(
       children: figma.textContent('Children'),
     },
     example: (props: ButtonProps) => (
-      <Button priority={props.priority} size={props.size} disabled={props.disabled}>
+      <Button variant={props.variant} size={props.size} disabled={props.disabled}>
         {props.children}
       </Button>
     ),

@@ -8,8 +8,8 @@ import {darkTheme, lightTheme} from 'sentry/utils/theme/theme';
 
 const themes = {light: lightTheme, dark: darkTheme};
 
-const allPriorities: Array<ButtonProps['priority']> = [
-  'default',
+const allVariants: Array<ButtonProps['variant']> = [
+  'secondary',
   'primary',
   'danger',
   'warning',
@@ -32,35 +32,35 @@ describe('Button', () => {
       );
     }
 
-    describe.each(allPriorities)('priority %s', priority => {
+    describe.each(allVariants)('variant %s', variant => {
       describe.each(allSizes)('size %s', size => {
         it.snapshot(
           'without icon',
           () => (
             <Wrapper>
-              <Button priority={priority} size={size}>
+              <Button variant={variant} size={size}>
                 Button
               </Button>
             </Wrapper>
           ),
           {
             group: `${themeName} – without icon`,
-            display_name: `${themeName} / ${priority} / ${size} / without icon`,
+            display_name: `${themeName} / ${variant} / ${size} / without icon`,
           }
         );
 
         it.snapshot(
           'with icon',
           () => (
             <Wrapper>
-              <Button priority={priority} size={size} icon={<IconEdit />}>
+              <Button variant={variant} size={size} icon={<IconEdit />}>
                 Button
               </Button>
             </Wrapper>
           ),
           {
             group: `${themeName} – with icon`,
-            display_name: `${themeName} / ${priority} / ${size} / with icon`,
+            display_name: `${themeName} / ${variant} / ${size} / with icon`,
           }
         );
 
@@ -69,7 +69,7 @@ describe('Button', () => {
           () => (
             <Wrapper>
               <Button
-                priority={priority}
+                variant={variant}
                 size={size}
                 icon={<IconEdit />}
                 aria-label="Edit"
@@ -78,7 +78,7 @@ describe('Button', () => {
           ),
           {
             group: `${themeName} – icon-only`,
-            display_name: `${themeName} / ${priority} / ${size} / icon-only`,
+            display_name: `${themeName} / ${variant} / ${size} / icon-only`,
           }
         );
       });

@@ -6,7 +6,6 @@ import type {StrictCSSObject, Theme} from 'sentry/utils/theme';
 import {
   type ButtonVariant,
   type DO_NOT_USE_CommonButtonProps as CommonButtonProps,
-  DO_NOT_USE_resolveButtonVariant as resolveButtonVariant,
 } from './types';
 
 export const DO_NOT_USE_BUTTON_ICON_SIZES: Record<
@@ -29,14 +28,14 @@ const elevation = {
 const hoverElevation = '1px';
 
 export function DO_NOT_USE_getButtonStyles(
-  p: Pick<CommonButtonProps, 'priority' | 'variant' | 'busy'> &
+  p: Pick<CommonButtonProps, 'variant' | 'busy'> &
     Pick<ButtonProps, 'disabled'> & {
       shapeVariant: 'rectangular' | 'square';
       size: NonNullable<ButtonProps['size']>;
       theme: Theme;
     }
 ): StrictCSSObject {
-  const variant = resolveButtonVariant(p);
+  const variant = p.variant ?? 'secondary';
 
   const buttonSizes = {
     ...p.theme.form,

@@ -2,16 +2,6 @@ import type {LocationDescriptor} from 'history';
 
 import type {TooltipProps} from '@sentry/scraps/tooltip';
 
-// We do not want people using this type as it should only be used
-// internally by the different button implementations
-type ButtonPriority =
-  | 'default'
-  | 'primary'
-  | 'danger'
-  | 'warning'
-  | 'link'
-  | 'transparent';
-
 export type ButtonVariant =
   | 'secondary'
   | 'primary'
@@ -20,18 +10,6 @@ export type ButtonVariant =
   | 'link'
   | 'transparent';
 
-export function DO_NOT_USE_resolveButtonVariant(
-  props: Pick<DO_NOT_USE_CommonButtonProps, 'priority' | 'variant'>
-): ButtonVariant {
-  if (props.variant !== undefined) {
-    return props.variant;
-  }
-  if (props.priority === 'default') {
-    return 'secondary';
-  }
-  return props.priority ?? 'secondary';
-}
-
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export interface DO_NOT_USE_CommonButtonProps {
   /**
@@ -56,13 +34,6 @@ export interface DO_NOT_USE_CommonButtonProps {
    * appropriately based on the size of the button.
    */
   icon?: React.ReactNode;
-  /**
-   * The semantic "priority" of the button. Use `primary` when the action is
-   * contextually the primary action, `danger` if the button will do something
-   * destructive, `link` for visual similarity to a link.
-   * @deprecated use `variant`
-   */
-  priority?: ButtonPriority;
   /**
    * The size of the button
    */

@@ -17,7 +17,7 @@ export function useButtonFunctionality(props: ButtonProps | LinkButtonProps) {
     analyticsEventName: props.analyticsEventName,
     analyticsEventKey: props.analyticsEventKey,
     analyticsParams: {
-      priority: props.priority,
+      variant: props.variant,
       href: 'href' in props ? props.href : undefined,
       ...props.analyticsParams,
     },

@@ -341,7 +341,7 @@ export function SectionToggle({item, listState, onToggle}: SectionToggleProps) {
       data-key={item.key}
       visible={visible}
       size="zero"
-      priority="transparent"
+      variant="transparent"
       // Remove this button from keyboard navigation and the accessibility tree, since
       // the outer list component implements a roving `tabindex` system that would be
       // messed up if there was a focusable, non-selectable button in the middle of it.

@@ -14,7 +14,7 @@ export function BasicDemo() {
             <Header closeButton>Example Modal</Header>
             <Body>This is the modal content.</Body>
             <Footer>
-              <Button priority="primary" onClick={closeModal}>
+              <Button variant="primary" onClick={closeModal}>
                 Done
               </Button>
             </Footer>
@@ -54,7 +54,7 @@ export function CloseEventsDemo() {
                 <Header>No Auto-Close</Header>
                 <Body>This modal can only be closed via the button below.</Body>
                 <Footer>
-                  <Button priority="primary" onClick={closeModal}>
+                  <Button variant="primary" onClick={closeModal}>
                     Close
                   </Button>
                 </Footer>
@@ -100,8 +100,8 @@ export function SubComponentsDemo() {
         This is a standalone ModalBody — useful for previewing styles outside a modal.
       </ModalBody>
       <ModalFooter>
-        <Button priority="default">Cancel</Button>
-        <Button priority="primary">Confirm</Button>
+        <Button variant="secondary">Cancel</Button>
+        <Button variant="primary">Confirm</Button>
       </ModalFooter>
     </Flex>
   );

@@ -278,7 +278,7 @@ const SegmentWrap = styled('label')<{
     ...DO_NOT_USE_getButtonStyles({
       ...p,
       disabled: p.isDisabled,
-      priority: p.isSelected && p.priority === 'primary' ? 'primary' : 'default',
+      variant: p.isSelected && p.priority === 'primary' ? 'primary' : 'secondary',
       shapeVariant: p.shapeVariant,
     }),
   })}

@@ -12,7 +12,7 @@ const defaultButtonTracking = (props: ButtonProps) => {
       console.log('buttonAnalyticsEvent', {
         eventKey: props.analyticsEventKey,
         eventName: props.analyticsEventName,
-        priority: props.priority,
+        variant: props.variant,
         href: 'href' in props ? props.href : undefined,
         ...props.analyticsParams,
       });

diff --git a/static/app/components/dropdownButton.tsx b/static/app/components/dropdownButton.tsx
@@ -4,8 +4,6 @@ import type {DistributedOmit} from 'type-fest';
 
 import type {ButtonProps} from '@sentry/scraps/button';
 import {Button} from '@sentry/scraps/button';
-// eslint-disable-next-line boundaries/dependencies
-import {DO_NOT_USE_resolveButtonVariant as resolveButtonVariant} from '@sentry/scraps/button/types';
 
 import {IconChevron} from 'sentry/icons';
 
@@ -53,7 +51,7 @@ export function DropdownButton({
       {showChevron && (
         <ChevronWrap>
           <IconChevron
-            variant={resolveButtonVariant(props) === 'secondary' ? 'muted' : undefined}
+            variant={(props.variant ?? 'secondary') === 'secondary' ? 'muted' : undefined}
             direction={isOpen ? 'up' : 'down'}
             size={size === 'zero' || size === 'xs' ? 'xs' : 'sm'}
           />

@@ -190,7 +190,7 @@ export function AndroidNativeTombstonesBanner({event, projectId}: Props) {
         position="bottom-end"
         triggerProps={{
           showChevron: false,
-          priority: 'transparent',
+          variant: 'transparent',
           icon: <IconClose variant="muted" />,
         }}
         size="xs"

@@ -76,7 +76,7 @@ export function FeedbackShortId({className, feedbackItem, style}: Props) {
           'aria-label': t('Short-ID copy actions'),
           icon: <IconChevron direction="down" size="xs" />,
           size: 'zero',
-          priority: 'transparent',
+          variant: 'transparent',
           showChevron: false,
         }}
         position="bottom"

@@ -34,7 +34,7 @@ const frontmatter = {
       {
         children: 'Get Started',
         to: '/stories/principles/tokens/',
-        priority: 'primary',
+        variant: 'primary',
       },
       {
         children: 'View on GitHub',

@@ -77,7 +77,7 @@ export function AddWidget({onAddWidget}: Props) {
               size: 'md',
               showChevron: false,
               icon: <IconAdd size="lg" variant="muted" />,
-              priority: 'transparent',
+              variant: 'transparent',
             }}
           />
         </InnerWrapper>

@@ -282,7 +282,7 @@ export function CronDetectorDetails({detector, project}: CronDetectorDetailsProp
                       text={dataSource.queryObj.slug}
                       aria-label={t('Copy monitor slug to clipboard')}
                       size="zero"
-                      priority="transparent"
+                      variant="transparent"
                     />
                   </Flex>
                 }

@@ -201,7 +201,7 @@ export function InstrumentationGuide() {
                     trigger={triggerProps => (
                       <OverlayTrigger.Button
                         {...triggerProps}
-                        priority="transparent"
+                        variant="transparent"
                         size="zero"
                       />
                     )}

@@ -424,7 +424,7 @@ export function MetricDetectorChart({
           trigger={triggerProps => (
             <OverlayTrigger.Button
               {...triggerProps}
-              priority="transparent"
+              variant="transparent"
               prefix={t('Display')}
             />
           )}

@@ -177,7 +177,7 @@ export function ChartContextMenu({
     <DropdownMenu
       triggerProps={{
         size: 'xs',
-        priority: 'transparent',
+        variant: 'transparent',
         showChevron: false,
         icon: <IconEllipsis />,
       }}

@@ -121,7 +121,7 @@ export function MessagesPanel({nodes, selectedNodeId, onSelectNode}: MessagesPan
               )}
               <StyledClippedBox
                 clipHeight={200}
-                buttonProps={{priority: 'default', size: 'xs'}}
+                buttonProps={{variant: 'secondary', size: 'xs'}}
                 collapsible
               >
                 <Container padding="md">

@@ -76,7 +76,7 @@ export function ChartContextMenu({visible, setVisible}: ChartContextMenuProps) {
     <DropdownMenu
       triggerProps={{
         size: 'xs',
-        priority: 'transparent',
+        variant: 'transparent',
         showChevron: false,
         'aria-label': t('Context Menu'),
         icon: <IconEllipsis />,

@@ -417,7 +417,7 @@ function ContextMenu({
     <DropdownMenu
       triggerProps={{
         size: 'xs',
-        priority: 'transparent',
+        variant: 'transparent',
         showChevron: false,
         icon: <IconEllipsis />,
       }}

@@ -207,7 +207,7 @@ export function MultiQueryModeChart({
             key="contextMenu"
             triggerProps={{
               size: 'xs',
-              priority: 'transparent',
+              variant: 'transparent',
               showChevron: false,
               icon: <IconEllipsis />,
             }}

@@ -200,7 +200,7 @@ export function BaseChartActionDropdown({
       triggerProps={{
         'aria-label': t('Widget actions'),
         size: 'xs',
-        priority: 'transparent',
+        variant: 'transparent',
         showChevron: false,
         icon: <IconEllipsis direction="down" size="sm" />,
       }}

@@ -31,7 +31,7 @@ function NoteDropdown({
       triggerProps={{
         size: 'zero',
         showChevron: false,
-        priority: 'transparent',
+        variant: 'transparent',
         icon: <IconEllipsis />,
         'aria-label': t('Comment Actions'),
       }}