Rename all instances of Button variant -> kind.

src/components/actions/ButtonAsLink/ButtonAsLink.tsx

@@ -22,7 +22,7 @@ export type ButtonAsLinkProps = React.PropsWithChildren<ComponentProps<'button'>
   label?: NonNullable<LinkProps['label']>,
 
   // Button props
-  //variant: NonNullable<ButtonProps['variant']>,
+  //kind: NonNullable<ButtonProps['kind']>,
   //nonactive: NonNullable<ButtonProps['nonactive']>,
   //disabled: NonNullable<ButtonProps['disabled']>,
   onPress?: NonNullable<ButtonProps['onPress']>,

src/components/actions/LinkAsButton/LinkAsButton.stories.tsx

@@ -22,7 +22,7 @@ export default {
   argTypes: {},
   args: {
     unstyled: false,
-    variant: 'primary',
+    kind: 'primary',
     label: 'Link',
     href: 'https://fortanix.com',
     target: '_blank',
@@ -41,17 +41,17 @@ export const Variants: Story = {
       gridAutoFlow: 'row',
       gap: '1rem',
     }}>
-      <p><LinkAsButton {...args} variant="primary"/></p>
-      <p><LinkAsButton {...args} variant="primary" nonactive/></p>
-      <p><LinkAsButton {...args} variant="primary" disabled/></p>
+      <p><LinkAsButton {...args} kind="primary"/></p>
+      <p><LinkAsButton {...args} kind="primary" nonactive/></p>
+      <p><LinkAsButton {...args} kind="primary" disabled/></p>
 
-      <p><LinkAsButton {...args} variant="secondary"/></p>
-      <p><LinkAsButton {...args} variant="secondary" nonactive/></p>
-      <p><LinkAsButton {...args} variant="secondary" disabled/></p>
+      <p><LinkAsButton {...args} kind="secondary"/></p>
+      <p><LinkAsButton {...args} kind="secondary" nonactive/></p>
+      <p><LinkAsButton {...args} kind="secondary" disabled/></p>
 
-      <p><LinkAsButton {...args} variant="tertiary"/></p>
-      <p><LinkAsButton {...args} variant="tertiary" nonactive/></p>
-      <p><LinkAsButton {...args} variant="tertiary" disabled/></p>
+      <p><LinkAsButton {...args} kind="tertiary"/></p>
+      <p><LinkAsButton {...args} kind="tertiary" nonactive/></p>
+      <p><LinkAsButton {...args} kind="tertiary" disabled/></p>
     </div>
   ),
 };
@@ -62,7 +62,7 @@ export const Variants: Story = {
  */
 export const Download: Story = {
   args: {
-    variant: 'tertiary',
+    kind: 'tertiary',
     download: 'my_file.txt',
     label: 'Download',
     href: `data:text/plain,Lorem ipsum`,

src/components/actions/LinkAsButton/LinkAsButton.tsx

@@ -21,7 +21,7 @@ export type LinkAsButtonProps = React.PropsWithChildren<ComponentProps<'a'> & {
   label?: NonNullable<LinkProps['label']>,
 
   // Button props
-  variant?: NonNullable<ButtonProps['variant']>,
+  kind?: NonNullable<ButtonProps['kind']>,
   nonactive?: NonNullable<ButtonProps['nonactive']>,
   disabled?: NonNullable<ButtonProps['disabled']>,
 }>;
@@ -34,7 +34,7 @@ export const LinkAsButton = (props: LinkAsButtonProps) => {
   const {
     unstyled = false,
     label,
-    variant,
+    kind,
     nonactive,
     disabled,
     ...propsRest
@@ -48,8 +48,8 @@ export const LinkAsButton = (props: LinkAsButtonProps) => {
       className={cx({
         bk: true,
         [ButtonClassNames['bk-button']]: !unstyled,
-        [ButtonClassNames['bk-button--primary']]: variant === 'primary',
-        [ButtonClassNames['bk-button--secondary']]: variant === 'secondary',
+        [ButtonClassNames['bk-button--primary']]: kind === 'primary',
+        [ButtonClassNames['bk-button--secondary']]: kind === 'secondary',
         [ButtonClassNames['bk-button--nonactive']]: nonactive,
         [ButtonClassNames['bk-button--disabled']]: disabled,
       }, props.className)}

src/components/containers/Banner/Banner.stories.tsx

@@ -162,7 +162,7 @@ export const BannerWithThemedContent: Story = {
           The following components should always have a light theme, even in dark mode:
         </p>
         <div style={{ display: 'flex', gap: '2ch', marginTop: '1lh' }}>
-          <Button nonactive variant="primary" onPress={() => alert('clicked')}>Button</Button>
+          <Button nonactive kind="primary" onPress={() => alert('clicked')}>Button</Button>
           <SegmentedControl
             options={['Test 1', 'Test 2']}
             defaultValue="Test 1"

src/components/containers/Dialog/Dialog.tsx

@@ -67,12 +67,12 @@ const ActionIcon = ({ tooltip, ...buttonProps }: ActionIconProps) => {
 const CancelAction = (props: ActionProps) => {
   const context = useDialogContext();
   const handlePress = () => { props.onPress?.(); context.close(); };
-  return <Action variant="secondary" label="Cancel" {...props} onPress={handlePress}/>;
+  return <Action kind="secondary" label="Cancel" {...props} onPress={handlePress}/>;
 };
 const SubmitAction = (props: ActionProps) => {
   const context = useDialogContext();
   const handlePress = () => { props.onPress?.(); context.close(); };
-  return <Action variant="primary" label="Submit" {...props} onPress={handlePress}/>;
+  return <Action kind="primary" label="Submit" {...props} onPress={handlePress}/>;
 };
 
 export type DialogProps = Omit<ComponentProps<'dialog'>, 'title'> & {

src/components/forms/context/SubmitButton/SubmitButton.tsx

@@ -84,7 +84,7 @@ export const SubmitButton = (props: SubmitButtonProps) => {
 
   return (
     <Button
-      variant="primary" // Primary by default
+      kind="primary" // Primary by default
       form={formContext.formId}
       {...propsButton}
       // @ts-expect-error We're using an invalid `type` on purpose here, this is meant to be used internally only.

src/components/graphics/PlaceholderEmpty/PlaceholderEmpty.stories.tsx

@@ -30,8 +30,8 @@ export default {
 
 const actions = (
   <PlaceholderEmptyAction>
-    <Button variant="secondary">Button</Button>
-    <Button variant="primary">Button</Button>
+    <Button kind="secondary">Button</Button>
+    <Button kind="primary">Button</Button>
   </PlaceholderEmptyAction>
 );
 

src/components/graphics/PlaceholderEmpty/PlaceholderEmpty.tsx

@@ -80,7 +80,7 @@ export const PlaceholderEmpty = (props: PlaceholderEmptyProps) => {
 export type PlaceholderEmptyActionProps = React.PropsWithChildren<ComponentProps<'div'>>;
 /**
  * A wrapper component, intended to easily add some styling to children's `<Button/>`'s. 
- * UX expects that such buttons are `<Button variant="tertiary"/>`.
+ * UX expects that such buttons are `<Button kind="tertiary"/>`.
  */
 export const PlaceholderEmptyAction = (props: PlaceholderEmptyActionProps) => {
   return (

src/components/overlays/DialogModal/DialogModal.stories.tsx

@@ -26,7 +26,7 @@ export default {
   argTypes: {},
   args: {
     title: 'Modal Dialog',
-    trigger: ({ activate }) => <Button variant="primary" label="Open modal" onPress={activate}/>,
+    trigger: ({ activate }) => <Button kind="primary" label="Open modal" onPress={activate}/>,
     children: <LoremIpsum paragraphs={15}/>,
   },
   render: (args) => <><LoremIpsum paragraphs={2}/> <DialogModal {...args}/> <LoremIpsum paragraphs={2}/></>,
@@ -85,7 +85,7 @@ export const DialogModalNested: Story = {
       <DialogModal
         className="inner"
         title="Submodal"
-        trigger={({ activate }) => <Button variant="primary" label="Open submodal" onPress={activate}/>}
+        trigger={({ activate }) => <Button kind="primary" label="Open submodal" onPress={activate}/>}
       >
         This is a submodal. Closing this modal should keep the outer modal still open.
       </DialogModal>
@@ -99,16 +99,16 @@ export const DialogModalWithToast: Story = {
     className: 'outer',
     children: (
       <>
-        <Button variant="primary" onPress={() => { notifyTest(); }}>
+        <Button kind="primary" onPress={() => { notifyTest(); }}>
           Trigger toast notification
         </Button>
         <DialogModal
           className="inner"
           title="Submodal"
-          trigger={({ activate }) => <Button variant="primary" label="Open submodal" onPress={activate}/>}
+          trigger={({ activate }) => <Button kind="primary" label="Open submodal" onPress={activate}/>}
         >
           <p>Test rendering toast notifications over the modal:</p>
-          <Button variant="primary" onPress={() => { notifyTest(); }}>
+          <Button kind="primary" onPress={() => { notifyTest(); }}>
             Trigger toast notification
           </Button>
         </DialogModal>
@@ -136,7 +136,7 @@ export const DialogModalUncloseable: Story = {
     children: ({ close }) => (
       <article className="bk-body-text">
         <p>It should not be possible to close this dialog, except through the following button:</p>
-        <p><Button variant="primary" label="Force close" onPress={close}/></p>
+        <p><Button kind="primary" label="Force close" onPress={close}/></p>
       </article>
     ),
   },
@@ -181,8 +181,8 @@ const DialogModalControlledWithSubject = (props: React.ComponentProps<typeof Dia
 
       <p>A single details modal will be used, filled in with the subject based on which name was pressed.</p>
 
-      <p><Button variant="primary" label="Open: Alice" onPress={() => { modal.activateWith({ name: 'Alice' }); }}/></p>
-      <p><Button variant="primary" label="Open: Bob" onPress={() => { modal.activateWith({ name: 'Bob' }); }}/></p>
+      <p><Button kind="primary" label="Open: Alice" onPress={() => { modal.activateWith({ name: 'Alice' }); }}/></p>
+      <p><Button kind="primary" label="Open: Bob" onPress={() => { modal.activateWith({ name: 'Bob' }); }}/></p>
     </article>
   );
 };
@@ -213,14 +213,14 @@ const DialogModalControlledConfirmation = (props: React.ComponentProps<typeof Di
       <p>A single details modal will be used, filled in with the subject based on which name was pressed.</p>
 
       <p>
-        <Button variant="primary"
+        <Button kind="primary"
           label={deleted.has('Item 1') ? 'Deleted' : `Delete Item 1`}
           disabled={deleted.has('Item 1')}
           onPress={() => { deleteConfirmer.activateWith({ name: 'Item 1' }); }}
         />
       </p>
       <p>
-        <Button variant="primary"
+        <Button kind="primary"
           label={deleted.has('Item 2') ? 'Deleted' : `Delete Item 2`}
           disabled={deleted.has('Item 2')}
           onPress={() => { deleteConfirmer.activateWith({ name: 'Item 2' }); }}

src/components/overlays/DialogOverlay/DialogOverlay.stories.tsx

@@ -32,7 +32,7 @@ export default {
     <>
       <LoremIpsum paragraphs={3}/>
       <DialogOverlay {...args}
-        trigger={({ activate }) => <Button variant="primary" label="Open overlay" onPress={activate}/>}
+        trigger={({ activate }) => <Button kind="primary" label="Open overlay" onPress={activate}/>}
       />
       <LoremIpsum paragraphs={3}/>
     </>
@@ -61,10 +61,10 @@ const DialogOverlayControlledWithSubject = (props: React.ComponentProps<typeof D
       <p>A single details overlay will be used, filled in with the subject based on which name was pressed.</p>
 
       <p>
-        <Button variant="primary" label="Open: Alice" onPress={() => { overlay.activateWith({ name: 'Alice' }); }}/>
+        <Button kind="primary" label="Open: Alice" onPress={() => { overlay.activateWith({ name: 'Alice' }); }}/>
       </p>
       <p>
-        <Button variant="primary" label="Open: Bob" onPress={() => { overlay.activateWith({ name: 'Bob' }); }}/>
+        <Button kind="primary" label="Open: Bob" onPress={() => { overlay.activateWith({ name: 'Bob' }); }}/>
       </p>
     </article>
   );
@@ -82,7 +82,7 @@ export const DialogOverlayWithNestedModal: Story = {
     children: (
       <DialogModal
         title="Modal"
-        trigger={({ activate }) => <Button variant="primary" label="Open modal" onPress={activate}/>}
+        trigger={({ activate }) => <Button kind="primary" label="Open modal" onPress={activate}/>}
       >
         Modal nested inside a popover.
       </DialogModal>
@@ -94,7 +94,7 @@ export const DialogOverlayWithToast: Story = {
   args: {
     display: 'slide-over',
     children: (
-      <Button variant="primary" label="Trigger notification"
+      <Button kind="primary" label="Trigger notification"
         onPress={() => notify.info('This notification should be above the overlay.', { autoClose: false })}
       />
     ),

src/components/overlays/DropdownMenu/DropdownMenuProvider.stories.tsx

@@ -32,7 +32,7 @@ export const Standard: Story = {
   name: 'DropdownMenuProvider',
   args: {
     children: ({ props, state }) => (
-      <Button variant="primary" {...props()}>
+      <Button kind="primary" {...props()}>
         {state.selectedOption ? `Selected: ${state.selectedOption}` : 'Open dropdown'}
       </Button>
     ),
@@ -55,7 +55,7 @@ export const WithPlacement: Story = {
   args: {
     placement: 'right',
     children: ({ props, state }) => (
-      <Button variant="primary" {...props()}>
+      <Button kind="primary" {...props()}>
         {state.selectedOption ? `Selected: ${state.selectedOption}` : 'Open dropdown placed to the right'}
       </Button>
     ),

src/components/overlays/SpinnerModal/SpinnerModal.stories.tsx

@@ -40,7 +40,7 @@ const SpinnerModalControlledWithTrigger = (props: SpinnerModalArgs) => {
     <>
       {isLoading && <SpinnerModal delay={0} {...props}/>}
       <LoremIpsum paragraphs={2}/>
-      <Button variant="primary" label="Trigger spinner for 3 seconds" onPress={() => { setIsLoading(true); }}/>
+      <Button kind="primary" label="Trigger spinner for 3 seconds" onPress={() => { setIsLoading(true); }}/>
       <LoremIpsum paragraphs={2}/>
     </>
   );

src/components/overlays/ToastProvider/ToastProvider.stories.tsx

@@ -50,7 +50,7 @@ export const ToastStandard: Story = {
 export const ToastProviderWithTrigger: Story = {
   args: {
     children: (
-      <Button variant="primary" label="Notify (success)"
+      <Button kind="primary" label="Notify (success)"
         onPress={() => notify.success({ title: 'Notification title', message: 'This is a success notification.' })}
       />
     ),

src/components/overlays/Tooltip/Tooltip.stories.tsx

@@ -106,7 +106,7 @@ const TooltipNativeAnchoringControlled = () => {
         This is a tooltip with a lot of text that gives more information about the element.
         It has a <DummyLink>link</DummyLink> you can focus.
       </Tooltip>
-      <Button popoverTarget={id} variant="primary" label="Hover over me"
+      <Button popoverTarget={id} kind="primary" label="Hover over me"
         style={{ anchorName }}
         onMouseEnter={() => { refTooltip.current?.showPopover(); }}
         onMouseLeave={() => { refTooltip.current?.hidePopover(); }}

src/components/overlays/Tooltip/TooltipProvider.stories.tsx

@@ -26,7 +26,7 @@ export default {
   },
   args: {
     tooltip: <>This is a tooltip</>,
-    children: (props) => <Button {...props()} variant="primary" label="Hover over me"/>,
+    children: (props) => <Button {...props()} kind="primary" label="Hover over me"/>,
   },
   render: (args) => <TooltipProvider {...args}/>,
 } satisfies Meta<TooltipProviderArgs>;
@@ -102,7 +102,7 @@ export const TooltipWithScroll: Story = {
       <OverflowTester openDefault lines={5}/>
 
       <TooltipProvider tooltip="Tooltips will auto-reposition when it hits the viewport due to scroll.">
-        {props => <Button {...props()} variant="primary" label="Scroll me" autoFocus/>}
+        {props => <Button {...props()} kind="primary" label="Scroll me" autoFocus/>}
       </TooltipProvider>
 
       <OverflowTester openDefault/>
@@ -116,7 +116,7 @@ export const TooltipWithScroll: Story = {
 export const TooltipWithFocus: Story = {
   args: {
     tooltip: 'Tooltips will open when the anchor element is focused',
-    children: (props) => <Button {...props()} variant="primary" label="Focus me" autoFocus/>,
+    children: (props) => <Button {...props()} kind="primary" label="Focus me" autoFocus/>,
   },
 };
 
@@ -139,7 +139,7 @@ const TooltipWithDrag = () => {
               boundary={boundaryRef.current ?? undefined}
               enablePreciseTracking
             >
-              <Button ref={targetRef} variant="secondary" label="Drag me" autoFocus/>
+              <Button ref={targetRef} kind="secondary" label="Drag me" autoFocus/>
             </TooltipProvider>
           }
         </Draggable>

src/components/tables/DataTable/DataTableLazy.stories.tsx

@@ -67,8 +67,8 @@ const DataTableLazyTemplate = (props: dataTeableLazyTemplateProps) => {
               title="No users"
               actions={
                 <DataTableLazy.PlaceholderEmptyAction>
-                  <Button variant="secondary" onPress={() => {}}>Action 1</Button>
-                  <Button variant="primary" onPress={() => {}}>Action 2</Button>
+                  <Button kind="secondary" onPress={() => {}}>Action 1</Button>
+                  <Button kind="primary" onPress={() => {}}>Action 2</Button>
                 </DataTableLazy.PlaceholderEmptyAction>
               }
             />

src/components/tables/DataTable/DataTableLazy.tsx

@@ -280,7 +280,7 @@ export const DataTableLazy = ({ className, footer, ...propsRest }: DataTableLazy
         <DataTablePlaceholderError
           actions={
             <PlaceholderEmptyAction>
-              <Button variant="primary" onPress={() => { reload(); }}>
+              <Button kind="primary" onPress={() => { reload(); }}>
                 Retry
               </Button>
             </PlaceholderEmptyAction>

src/components/tables/DataTable/DataTableStream.stories.tsx

@@ -118,8 +118,8 @@ const DataTableStreamTemplate = ({dataTableProps, ...props} : dataTeableLazyTemp
               title="No users"
               actions={
                 <DataTableStream.PlaceholderEmptyAction>
-                  <Button variant="secondary" onPress={() => {}}>Action 1</Button>
-                  <Button variant="primary" onPress={() => {}}>Action 2</Button>
+                  <Button kind="secondary" onPress={() => {}}>Action 1</Button>
+                  <Button kind="primary" onPress={() => {}}>Action 2</Button>
                 </DataTableStream.PlaceholderEmptyAction>
               }
             />

src/components/tables/DataTable/DataTableStream.tsx

@@ -519,7 +519,7 @@ export const DataTableStream = ({
         <DataTablePlaceholderError
           actions={
             <PlaceholderEmptyAction>
-              <Button variant="primary" onPress={() => { reload(); }}>
+              <Button kind="primary" onPress={() => { reload(); }}>
                 Retry
               </Button>
             </PlaceholderEmptyAction>

src/components/tables/DataTable/pagination/PaginationSizeSelector.tsx

@@ -46,7 +46,7 @@ export const PaginationSizeSelector = (props: PaginationSizeSelectorProps) => {
       >
         {({ props, open }) => (
           <Button
-            variant="tertiary"
+            kind="tertiary"
             {...props()}
             aria-label={`${table.state.pageSize} rows per page`}
             className={cx(

src/components/tables/DataTable/pagination/PaginationStream.tsx

@@ -32,7 +32,7 @@ export const PaginationStreamPager = ({ pageSizeOptions }: PaginationStreamPager
       </Button>
 
       <Button trimmed
-        variant="tertiary"
+        kind="tertiary"
         className={cx(cl['pager__nav'], cl['pager__nav--prev'])}
         onPress={() => { table.previousPage(); }}
         nonactive={!table.canPreviousPage}
@@ -42,7 +42,7 @@ export const PaginationStreamPager = ({ pageSizeOptions }: PaginationStreamPager
       </Button>
 
       <Button trimmed
-        variant="tertiary"
+        kind="tertiary"
         className={cx(cl['pager__nav'], cl['pager__nav--next'])}
         onPress={() => { table.nextPage(); }}
         nonactive={!table.canNextPage}