Merged in fix/BOOK-293-button-variants (pull request #3371)

fix(BOOK-293): changed variants and props on IconButton component

* fix(BOOK-293): changed variants and props on IconButton component

* fix(BOOK-293): inherit color for icon


Approved-by: Bianca Widstam
Approved-by: Christel Westerberg

apps/partner-sas/components/LanguageSwitcher/index.tsx

@@ -61,7 +61,7 @@ export function LanguageSwitcher({
   return (
     <div className={classNames}>
       <DialogTrigger>
-        <Button className={styles.triggerButton} variant="Text" wrapping>
+        <Button className={styles.triggerButton} variant="Text">
           {isMobile && !isFooter ? null : (
             <MaterialIcon
               icon="globe"
@@ -159,7 +159,7 @@ function LanguageSwitcherContent({
           <div className={styles.closeModalWrapper}>
             <Button
               variant="Text"
-              size="Medium"
+              size="md"
               onPress={closeModal}
               className={styles.closeModal}
             >

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/AlreadyLinkedError.tsx

@@ -45,7 +45,7 @@ export function AlreadyLinkedError() {
           href={partnerSas[lang]}
           variant="Tertiary"
           color="Primary"
-          size="Large"
+          size="lg"
         >
           {intl.formatMessage({
             id: "linkEuroBonusAccount.viewLinkedAccountsButton",

apps/scandic-web/components/Blocks/CampaignHotelListing/Client.tsx

@@ -148,8 +148,7 @@ export default function CampaignHotelListingClient({
         <Button
           variant="Text"
           color="Primary"
-          size="Medium"
+          size="md"
-          typography="Body/Paragraph/mdBold"
           onPress={handleButtonClick}
         >
           <MaterialIcon icon={iconDirection} color="CurrentColor" />

apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/index.tsx

@@ -115,13 +115,7 @@ export default function HotelListingItem({
       </div>
       {url ? (
         <div className={styles.ctaWrapper}>
-          <ButtonLink
+          <ButtonLink href={url} variant="Tertiary" color="Primary" size="sm">
-            href={url}
-            variant="Tertiary"
-            color="Primary"
-            size="Small"
-            typography="Body/Supporting text (caption)/smBold"
-          >
             {intl.formatMessage({
               id: "destination.seeHotelDetails",
               defaultMessage: "See hotel details",

apps/scandic-web/components/Blocks/DynamicContent/ManageCookieConsent/CookieConsentButton/index.tsx

@@ -21,8 +21,7 @@ export function CookieConsentButton() {
   return (
     <Button
       variant="Text"
-      size="Medium"
+      size="md"
-      typography="Body/Paragraph/mdBold"
       wrapping={false}
       onPress={handleClick}
       className={styles.cookieConsentButton}

apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePointsButton.tsx

@@ -21,10 +21,9 @@ export function UsePointsButton({ variant, onPress }: ButtonProps) {
 
   return (
     <Button
-      size="Medium"
+      size="md"
       className={buttonClassName}
       variant={buttonVariant}
-      typography="Body/Paragraph/mdBold"
       onPress={onPress}
     >
       {intl.formatMessage({

apps/scandic-web/components/Blocks/DynamicContent/Overview/index.tsx

@@ -43,7 +43,6 @@ export default async function Overview({
           className={styles.teamMemberCardButton}
           variant="Tertiary"
           color="Primary"
-          typography="Body/Paragraph/mdBold"
         >
           <>
             <MaterialIcon icon="id_card" size={24} color="CurrentColor" />

apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/index.tsx

@@ -30,8 +30,7 @@ export default function ClaimPoints() {
         href={missingPoints[lang]}
         variant="Text"
         target="_blank"
-        size="Small"
+        size="sm"
-        typography="Body/Supporting text (caption)/smBold"
       >
         {intl.formatMessage({
           id: "points.claimPoints.cta",

apps/scandic-web/components/Blocks/DynamicContent/Points/PointsToSpendCard/ExpiringPointsSeeAllButton.tsx

@@ -26,12 +26,7 @@ export default function ExpiringPointsSeeAllButton({
 
   return (
     <>
-      <Button
+      <Button variant="Text" size="md" onPress={() => setIsOpen(true)}>
-        variant="Text"
-        size="Medium"
-        typography="Body/Paragraph/mdBold"
-        onPress={() => setIsOpen(true)}
-      >
         {intl.formatMessage({ id: "common.seeAll", defaultMessage: "See all" })}
         <MaterialIcon icon="chevron_right" color="CurrentColor" />
       </Button>

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx

@@ -18,9 +18,9 @@ import { trpc } from "@scandic-hotels/trpc/client"
 import useLang from "@/hooks/useLang"
 import { isRestaurantOnSiteTierReward } from "@/utils/rewards"
 
+import { ConfirmClose } from "./ConfirmClose"
 import RedeemCampaign from "./Flows/Campaign"
 import RedeemTier from "./Flows/Tier"
-import { ConfirmClose } from "./ConfirmClose"
 import { RedeemContext } from "./useRedeemFlow"
 
 import styles from "./redeem.module.css"
@@ -70,12 +70,7 @@ export default function Redeem({ reward, membershipNumber }: RedeemProps) {
       <DialogTrigger
         onOpenChange={(isOpen) => setAnimation(isOpen ? "visible" : "hidden")}
       >
-        <Button
+        <Button variant="Tertiary" size="lg" className={styles.redeemButton}>
-          variant="Tertiary"
-          size="Large"
-          typography="Body/Paragraph/mdBold"
-          className={styles.redeemButton}
-        >
           {reward.redeemLocation === "Non-redeemable"
             ? intl.formatMessage({
                 id: "rewards.howToUse",

apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/index.tsx

@@ -112,7 +112,7 @@ export default async function SASLinkAccountBanner(
               href={props.link.href}
               variant="Primary"
               color="Inverted"
-              size="Medium"
+              size="md"
             >
               {buttonText}
             </ButtonLink>

apps/scandic-web/components/Blocks/DynamicContent/Stays/NextStay/NextStayContent.tsx

@@ -137,7 +137,7 @@ export default async function NextStayContent({
             <ButtonLink
               variant="Tertiary"
               color="Inverted"
-              size="Medium"
+              size="md"
               href={bookingUrl}
               className={styles.cta}
             >

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Cards/SeeAllCard/index.tsx

@@ -16,12 +16,7 @@ export function SeeAllCard({ onPress }: SeeAllCardProps) {
 
   return (
     <div className={styles.card}>
-      <Button
+      <Button variant="Secondary" size="md" onPress={onPress}>
-        variant="Secondary"
-        size="Medium"
-        typography="Body/Paragraph/mdBold"
-        onPress={onPress}
-      >
         {intl.formatMessage({ id: "common.seeAll", defaultMessage: "See all" })}
         <MaterialIcon icon="chevron_right" color="CurrentColor" />
       </Button>

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/CarouselCard/index.tsx

@@ -107,7 +107,7 @@ export default function CarouselCard({ stay }: CarouselCardProps) {
             <ButtonLink
               variant="Text"
               color="Primary"
-              size="Small"
+              size="sm"
               href={bookingUrl}
             >
               {intl.formatMessage({

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/SeeAllCard/index.tsx

@@ -16,12 +16,7 @@ export function SeeAllCard({ onPress }: SeeAllCardProps) {
 
   return (
     <div className={styles.card}>
-      <Button
+      <Button variant="Secondary" size="md" onPress={onPress}>
-        variant="Secondary"
-        size="Medium"
-        typography="Body/Paragraph/mdBold"
-        onPress={onPress}
-      >
         {intl.formatMessage({ id: "common.seeAll", defaultMessage: "See all" })}
         <MaterialIcon icon="chevron_right" color="CurrentColor" />
       </Button>

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx

@@ -65,7 +65,7 @@ export default async function EmptyUpcomingStays() {
           })}
         </p>
       </Typography>
-      <ButtonLink href={href} variant="Tertiary" color="Primary" size="Small">
+      <ButtonLink href={href} variant="Tertiary" color="Primary" size="sm">
         {intl.formatMessage({
           id: "stays.findDestinationOrHotel",
           defaultMessage: "Find hotel or destination",

apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx

@@ -52,8 +52,7 @@ export default function FullWidthCampaign({
                 target={primary_button.openInNewTab ? "_blank" : undefined}
                 variant="Primary"
                 color="Inverted"
-                size="Small"
+                size="sm"
-                typography="Body/Supporting text (caption)/smBold"
                 className={styles.button}
               >
                 {primary_button.title}
@@ -64,10 +63,9 @@ export default function FullWidthCampaign({
                 href={secondary_button.href}
                 target={secondary_button.openInNewTab ? "_blank" : undefined}
                 variant="Secondary"
-                size="Small"
+                size="sm"
                 color="Inverted"
                 className={styles.button}
-                typography="Body/Supporting text (caption)/smBold"
               >
                 {secondary_button.title}
               </ButtonLink>

apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx

@@ -93,7 +93,7 @@ export default async function HotelListingItem({
             />
             <ButtonLink
               variant="Primary"
-              size="Small"
+              size="sm"
               href={cta.url}
               target={cta.openInNewTab ? "_blank" : undefined}
               className={styles.button}

apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx

@@ -74,10 +74,9 @@ export default async function JoinScandicFriends({
         {content.has_primary_button ? (
           <ButtonLink
             variant="Primary"
-            size="Small"
+            size="sm"
             href={primary_button.href}
             target={primary_button.openInNewTab ? "_blank" : undefined}
-            typography="Body/Supporting text (caption)/smBold"
             className={styles.primaryButton}
           >
             {primary_button.title}

apps/scandic-web/components/CampaignBanner/index.tsx

@@ -8,7 +8,6 @@ import { useMediaQuery } from "usehooks-ts"
 
 import { debounce } from "@scandic-hotels/common/utils/debounce"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { trackClick } from "@scandic-hotels/tracking/base"
 import { trpc } from "@scandic-hotels/trpc/client"
 
@@ -125,9 +124,8 @@ export default function CampaignBanner() {
             id: "campaignBanner.dismissBanner",
             defaultMessage: "Dismiss banner",
           })}
-        >
+          iconName="close"
-          <MaterialIcon color="CurrentColor" icon="close" />
+        />
-        </IconButton>
       </div>
     </div>
   )

apps/scandic-web/components/Carousel/CarouselNavigation.tsx

@@ -4,7 +4,6 @@ import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { useCarousel } from "./CarouselContext"
 
@@ -28,9 +27,8 @@ export function CarouselPrevious({ className }: CarouselButtonProps) {
           id: "carousel.previousSlide",
           defaultMessage: "Previous slide",
         })}
-      >
+        iconName="arrow_back"
-        <MaterialIcon color="Icon/Interactive/Default" icon="arrow_back" />
+      />
-      </IconButton>
     </span>
   )
 }
@@ -51,9 +49,8 @@ export function CarouselNext({ className }: CarouselButtonProps) {
           id: "carousel.nextSlide",
           defaultMessage: "Next slide",
         })}
-      >
+        iconName="arrow_forward"
-        <MaterialIcon color="Icon/Interactive/Default" icon="arrow_forward" />
+      />
-      </IconButton>
     </span>
   )
 }

apps/scandic-web/components/ContentType/CampaignPage/Hero/index.tsx

@@ -125,8 +125,7 @@ export default async function CampaignHero({
             variant="Secondary"
             color={buttonColor}
             href={button.url}
-            typography="Body/Paragraph/mdBold"
+            size="md"
-            size="Medium"
           >
             {button.cta}
           </ButtonLink>

apps/scandic-web/components/ContentType/CollectionPage/index.tsx

@@ -63,7 +63,7 @@ export async function CollectionPage() {
                   {header.top_primary_button?.url ? (
                     <ButtonLink
                       href={header.top_primary_button.url}
-                      size="Medium"
+                      size="md"
                       variant="Primary"
                       color="Inverted"
                     >
@@ -96,7 +96,7 @@ export async function CollectionPage() {
                 {header.top_primary_button?.url ? (
                   <ButtonLink
                     href={header.top_primary_button.url}
-                    size="Medium"
+                    size="md"
                     variant="Tertiary"
                   >
                     {header.top_primary_button.title}

apps/scandic-web/components/ContentType/ContentPage/index.tsx

@@ -62,7 +62,7 @@ export async function ContentPage() {
               {header.top_primary_button?.url ? (
                 <ButtonLink
                   href={header.top_primary_button.url}
-                  size="Medium"
+                  size="md"
                   variant="Tertiary"
                 >
                   {header.top_primary_button.title}

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx

@@ -143,13 +143,7 @@ export default function HotelListItem({ hotel, url }: HotelListItemProps) {
         </Typography>
         {url && (
           <div className={styles.ctaWrapper}>
-            <ButtonLink
+            <ButtonLink href={url} variant="Tertiary" color="Primary" size="sm">
-              href={url}
-              variant="Tertiary"
-              color="Primary"
-              size="Small"
-              typography="Body/Paragraph/mdBold"
-            >
               {intl.formatMessage({
                 id: "destination.seeHotelDetails",
                 defaultMessage: "See hotel details",

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/index.tsx

@@ -60,12 +60,7 @@ export default function CityMap({
     >
       <div className={styles.topSection}>
         {fromCountryPage ? (
-          <Button
+          <Button variant="Text" color="Primary" onPress={handleGoBack}>
-            typography="Body/Paragraph/mdBold"
-            variant="Text"
-            color="Primary"
-            onClick={handleGoBack}
-          >
             <MaterialIcon icon="arrow_back" color="CurrentColor" size={24} />
             <span>
               {intl.formatMessage({

apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CityMapCard/index.tsx

@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
 import { setMapUrlFromCountryPage } from "@scandic-hotels/common/hooks/map/useSetMapUrlFromCountryPage"
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
 import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -48,20 +47,15 @@ export default function CityMapCard({
       <IconButton
         variant="Muted"
         emphasis
+        size="sm"
         className={styles.closeButton}
         onPress={handleClose}
         aria-label={intl.formatMessage({
           id: "common.close",
           defaultMessage: "Close",
         })}
-      >
+        iconName="close"
-        <MaterialIcon
+      />
-          icon="close"
-          size={16}
-          className={styles.closeIcon}
-          color="CurrentColor"
-        />
-      </IconButton>
       {image ? (
         <DialogImage
           image={image.src}
@@ -85,7 +79,7 @@ export default function CityMapCard({
               href={cityMapUrl}
               variant="Secondary"
               color="Primary"
-              size="Small"
+              size="sm"
               onClick={() => setActiveCityMarker(null)}
             >
               <Typography variant="Body/Supporting text (caption)/smBold">

apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/index.tsx

@@ -131,9 +131,8 @@ export default function HotelListingItem({
             scroll={true}
             variant="Text"
             color="Primary"
-            size="Medium"
+            size="md"
             wrapping={false}
-            typography="Body/Paragraph/mdBold"
             onClick={() => setActiveMarker(hotel.id)}
           >
             {intl.formatMessage({
@@ -152,8 +151,7 @@ export default function HotelListingItem({
                 href={url}
                 variant="Tertiary"
                 color="Primary"
-                size="Small"
+                size="sm"
-                typography="Body/Paragraph/mdBold"
               >
                 {intl.formatMessage({
                   id: "destination.seeHotelDetails",

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/DestinationSearch/index.tsx

@@ -57,13 +57,12 @@ export function DestinationSearch() {
                       variant="Muted"
                       emphasis
                       className={styles.close}
-                    >
+                      aria-label={intl.formatMessage({
-                      <MaterialIcon
+                        id: "common.close",
-                        color="CurrentColor"
+                        defaultMessage: "Close",
-                        icon="close"
+                      })}
-                        size={24}
+                      iconName="close"
-                      />
+                    />
-                    </IconButton>
                     <DestinationSearchForm isMobile={true} />
                   </>
                 )}

apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx

@@ -5,7 +5,6 @@ import { useIntl } from "react-intl"
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
@@ -51,20 +50,15 @@ export default function HotelMapCard({
         <IconButton
           variant="Muted"
           emphasis
+          size="sm"
           className={styles.closeButton}
           onPress={handleClose}
           aria-label={intl.formatMessage({
             id: "common.close",
             defaultMessage: "Close",
           })}
-        >
+          iconName="close"
-          <MaterialIcon
+        />
-            icon="close"
-            size={16}
-            className={styles.closeIcon}
-            color="CurrentColor"
-          />
-        </IconButton>
         {image ? (
           <DialogImage
             image={image.src}
@@ -113,12 +107,7 @@ export default function HotelMapCard({
           </div>
 
           {url && (
-            <ButtonLink
+            <ButtonLink href={url} variant="Tertiary" color="Primary" size="sm">
-              href={url}
-              variant="Tertiary"
-              color="Primary"
-              size="Small"
-            >
               <Typography variant="Body/Supporting text (caption)/smBold">
                 <p>
                   {intl.formatMessage({

apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx

@@ -130,10 +130,9 @@ export default function DynamicMap({
           <Button
             color="Inverted"
             variant="Primary"
-            size="Small"
+            size="sm"
             className={styles.seeAsListButton}
-            onClick={onClose}
+            onPress={onClose}
-            typography="Body/Supporting text (caption)/smBold"
           >
             <MaterialIcon icon="format_list_bulleted" color="CurrentColor" />
             <span>
@@ -154,9 +153,8 @@ export default function DynamicMap({
               defaultMessage: "Zoom in",
             })}
             isDisabled={isMaxZoom}
-          >
+            iconName="add"
-            <MaterialIcon icon="add" color="CurrentColor" size={24} />
+          />
-          </IconButton>
           <IconButton
             variant="Elevated"
             className={styles.zoomButton}
@@ -166,9 +164,8 @@ export default function DynamicMap({
               defaultMessage: "Zoom out",
             })}
             isDisabled={isMinZoom}
-          >
+            iconName="remove"
-            <MaterialIcon icon="remove" color="CurrentColor" size={24} />
+          />
-          </IconButton>
         </div>
       </div>
     </div>

apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx

@@ -170,9 +170,8 @@ export default function Map({
         <div className={styles.mobileNavigation}>
           <Button
             variant="Text"
-            size="Small"
+            size="sm"
             color="Primary"
-            typography="Body/Supporting text (caption)/smBold"
             onClick={handleClose}
           >
             <MaterialIcon

apps/scandic-web/components/ContentType/DestinationPage/SeeOnMapFilterWrapper/index.tsx

@@ -23,9 +23,8 @@ export function SeeOnMapFilterWrapper({
       {mapUrl ? (
         <ButtonLink
           className={styles.mapButton}
-          typography="Body/Paragraph/mdBold"
           variant="Secondary"
-          size="Small"
+          size="sm"
           color="Primary"
           wrapping
           href={mapUrl}

apps/scandic-web/components/ContentType/DestinationPage/TopImages/index.tsx

@@ -63,9 +63,8 @@ export default function TopImages({ images, destinationName }: TopImageProps) {
           <Button
             variant="Primary"
             color="Inverted"
-            size="Small"
+            size="sm"
             onPress={() => setLightboxState({ open: true, activeIndex: 0 })}
-            typography="Body/Supporting text (caption)/smBold"
             className={styles.seeAllButton}
           >
             {intl.formatMessage({

apps/scandic-web/components/ContentType/HotelMapPage/Client.tsx

@@ -103,10 +103,9 @@ export default function HotelMapPageClient({
     <Button
       variant="Primary"
       color="Inverted"
-      size="Small"
+      size="sm"
       className={styles.closeButton}
       onPress={handleClose}
-      typography="Body/Supporting text (caption)/smBold"
     >
       <MaterialIcon icon="close" size={20} color="CurrentColor" />
       <span>

apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/index.tsx

@@ -51,7 +51,6 @@ export default async function AmenitiesList({
       <ButtonLink
         href={`?s=${SidepeekSlugs.amenities}`}
         variant="Text"
-        typography="Body/Paragraph/mdBold"
         scroll={false}
       >
         {intl.formatMessage({

apps/scandic-web/components/ContentType/HotelPage/Hero/index.tsx

@@ -82,14 +82,13 @@ export function HotelPageHero({
           <Button
             variant="Primary"
             color="Inverted"
-            size="Small"
+            size="sm"
             onPress={() =>
               setLightboxState({
                 activeIndex: 0,
                 isOpen: true,
               })
             }
-            typography="Body/Supporting text (caption)/smBold"
             className={styles.seeAllButton}
           >
             {seeAllPhotosText}

apps/scandic-web/components/ContentType/HotelPage/IntroSection/TripAdvisorSection/index.tsx

@@ -59,8 +59,7 @@ export default async function TripAdvisorSection({
         href={tripAdvisorHref}
         variant="Text"
         color="Primary"
-        size="Small"
+        size="sm"
-        typography="Body/Supporting text (caption)/smBold"
         wrapping={false}
       >
         {formattedTripAdvisorText}

apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx

@@ -124,7 +124,6 @@ export default async function IntroSection({
         <ButtonLink
           href={`?s=${SidepeekSlugs.about}`}
           variant="Text"
-          typography="Body/Paragraph/mdBold"
           scroll={false}
         >
           {intl.formatMessage({

apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx

@@ -63,7 +63,7 @@ export default function MapCard({ hotelName, pois }: MapCardProps) {
         <ButtonLink
           variant="Secondary"
           color="Primary"
-          size="Small"
+          size="sm"
           href={mapUrl}
           scroll={true}
           onClick={trackHotelMapClick}

apps/scandic-web/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx

@@ -68,8 +68,7 @@ export function RoomCard({ room }: RoomCardProps) {
         <ButtonLink
           href={`?s=room-${getRoomNameAsParam(name)}`}
           variant="Text"
-          size="Medium"
+          size="md"
-          typography="Body/Paragraph/mdBold"
           scroll={false}
           className={styles.buttonLink}
         >

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx

@@ -35,8 +35,7 @@ export default async function ActivitiesSidePeek({
           href={href}
           variant="Secondary"
           color="Primary"
-          size="Medium"
+          size="md"
-          typography="Body/Paragraph/mdBold"
           fullWidth
         >
           {sidepeekCTA}

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx

@@ -69,9 +69,8 @@ export default async function MeetingsAndConferencesSidePeek({
             <ButtonLink
               variant="Secondary"
               color="Primary"
-              size="Medium"
+              size="md"
               href={meetingPageHref}
-              typography="Body/Paragraph/mdBold"
               fullWidth
             >
               {intl.formatMessage({

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/RestaurantBarItemLinks.tsx

@@ -28,8 +28,7 @@ export function RestaurantBarItemLinks({
         <ButtonLink
           variant="Primary"
           color="Primary"
-          size="Medium"
+          size="md"
-          typography="Body/Paragraph/mdBold"
           href={bookTableUrl}
           target="_blank"
           onClick={() => trackClick("book a table", { restaurantName })}
@@ -50,8 +49,7 @@ export function RestaurantBarItemLinks({
         <ButtonLink
           variant="Secondary"
           color="Primary"
-          size="Medium"
+          size="md"
-          typography="Body/Paragraph/mdBold"
           href={restaurantPageHref}
           fullWidth
         >

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx

@@ -50,7 +50,6 @@ export default async function WellnessAndExerciseSidePeek({
               href={spaPage.url}
               variant="Tertiary"
               color="Primary"
-              typography="Body/Paragraph/mdBold"
               fullWidth
             >
               {spaPage.buttonCTA}
@@ -61,7 +60,6 @@ export default async function WellnessAndExerciseSidePeek({
               href={wellnessExercisePageHref}
               color="Primary"
               variant="Secondary"
-              typography="Body/Paragraph/mdBold"
               fullWidth
             >
               {intl.formatMessage({

apps/scandic-web/components/ContentType/HotelSubpage/RestaurantSubpage/index.tsx

@@ -56,12 +56,7 @@ export default async function RestaurantSubpage({
         </div>
         {bookTableUrl ? (
           <div className={styles.buttonContainer}>
-            <ButtonLink
+            <ButtonLink href={bookTableUrl} variant="Primary" size="md">
-              href={bookTableUrl}
-              variant="Primary"
-              size="Medium"
-              typography="Body/Paragraph/mdBold"
-            >
               {intl.formatMessage({
                 id: "restaurantBar.bookATable",
                 defaultMessage: "Book a table",

apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar.tsx

@@ -47,12 +47,7 @@ export default async function RestaurantSidebar({
       ) : null}
       {bookTableUrl && (
         <div className={styles.buttonContainer}>
-          <ButtonLink
+          <ButtonLink href={bookTableUrl} variant="Primary" size="md">
-            href={bookTableUrl}
-            variant="Primary"
-            size="Medium"
-            typography="Body/Paragraph/mdBold"
-          >
             {intl.formatMessage({
               id: "restaurantBar.bookATable",
               defaultMessage: "Book a table",

apps/scandic-web/components/ContentType/PromoCampaignPage/ExpiredPromoCampaign/index.tsx

@@ -41,7 +41,7 @@ export default async function ExpiredPromoCampaign() {
           </Typography>
         </div>
 
-        <ButtonLink href={offers[lang]} variant="Tertiary" size="Large">
+        <ButtonLink href={offers[lang]} variant="Tertiary" size="lg">
           {intl.formatMessage({
             id: "promoCampaign.seeAllOffers",
             defaultMessage: "See all offers",

apps/scandic-web/components/ContentType/PromoCampaignPage/Hero/ActivateOffer/index.tsx

@@ -47,10 +47,9 @@ export default function ActivateOffer({
   function ActivateButton() {
     return (
       <Button
-        onClick={handleActivateFlow}
+        onPress={handleActivateFlow}
         variant="Tertiary"
-        size="Medium"
+        size="md"
-        typography="Body/Paragraph/mdRegular"
         className={styles.activateButton}
         isDisabled={activateCampaign.isPending}
         isPending={activateCampaign.isPending}

apps/scandic-web/components/ContentType/PromoCampaignPage/Hero/PromoLoginButton.tsx

@@ -30,7 +30,7 @@ export default function PromoLoginButton() {
       }
       variant="Primary"
       color="Inverted"
-      size="Medium"
+      size="md"
     >
       {intl.formatMessage({
         id: "promoCampaign.logIn",

apps/scandic-web/components/ContentType/PromoCampaignPage/Hero/PromoSignUpButton.tsx

@@ -27,7 +27,7 @@ export default function PromoSignUpButton() {
       href={signup[lang]}
       variant="Secondary"
       color="Inverted"
-      size="Medium"
+      size="md"
       prefetch={false}
     >
       {intl.formatMessage({

apps/scandic-web/components/DestinationFilterAndSort/FilterAndSortButton/index.tsx

@@ -36,17 +36,17 @@ export function FilterAndSortButton({
 
   const buttonProps: {
     variant: "Text" | "Secondary"
-    size: "Small" | "Medium"
+    size: "sm" | "md"
   } = isDesktop
     ? {
         //Desktop
         variant: "Text",
-        size: "Medium",
+        size: "md",
       }
     : {
         //Mobile
         variant: isMapView ? "Text" : "Secondary",
-        size: "Small",
+        size: "sm",
       }
 
   return (
@@ -54,7 +54,6 @@ export function FilterAndSortButton({
       <Button
         {...buttonProps}
         color="Primary"
-        typography="Body/Paragraph/mdBold"
         wrapping
         className={styles.button}
       >

apps/scandic-web/components/DestinationFilterAndSort/index.tsx

@@ -182,9 +182,9 @@ export default function DestinationFilterAndSort({
                 )}
                 <footer className={styles.footer}>
                   <Button
-                    onClick={clearPendingFilters}
+                    onPress={clearPendingFilters}
                     variant="Text"
-                    size="Small"
+                    size="sm"
                     color="Primary"
                   >
                     {intl.formatMessage({
@@ -194,10 +194,10 @@ export default function DestinationFilterAndSort({
                   </Button>
                   <Button
                     variant="Primary"
-                    size="Medium"
+                    size="md"
                     color="Primary"
                     isDisabled={pendingCount === 0}
-                    onClick={() => submitAndClose(close)}
+                    onPress={() => submitAndClose(close)}
                   >
                     {intl.formatMessage(
                       {

apps/scandic-web/components/Dialog/index.tsx

@@ -48,7 +48,7 @@ export default function Dialog({
                     <Button
                       variant="Secondary"
                       onPress={close}
-                      size="Medium"
+                      size="md"
                       color="Primary"
                     >
                       {cancelButtonText}
@@ -57,7 +57,7 @@ export default function Dialog({
                       <ButtonLink
                         variant="Primary"
                         color="Primary"
-                        size="Medium"
+                        size="md"
                         href={proceedHref}
                       >
                         {proceedText}
@@ -69,7 +69,7 @@ export default function Dialog({
                         onPress={() => {
                           proceedOnClick(close)
                         }}
-                        size="Medium"
+                        size="md"
                       >
                         {proceedText}
                       </Button>

apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/index.tsx

@@ -33,7 +33,7 @@ export default async function EmployeeBenefitsCallToActions() {
               })}
             </p>
           </Typography>
-          <ButtonLink href={loginAndLinkURL} size="Medium" variant="Tertiary">
+          <ButtonLink href={loginAndLinkURL} size="md" variant="Tertiary">
             {intl.formatMessage({
               id: "dtmc.logInAndLinkEmployment",
               defaultMessage: "Log in and link employment",
@@ -50,7 +50,7 @@ export default async function EmployeeBenefitsCallToActions() {
               })}
             </p>
           </Typography>
-          <ButtonLink href={signup[lang]} size="Medium" variant="Secondary">
+          <ButtonLink href={signup[lang]} size="md" variant="Secondary">
             {intl.formatMessage({
               id: "dtmc.signUpAndLinkEmployment",
               defaultMessage: "Sign up and link employment",
@@ -65,12 +65,7 @@ export default async function EmployeeBenefitsCallToActions() {
     return (
       <div className={styles.container}>
         <DigitalTeamMemberCard user={user}>
-          <TeamMemberCardTrigger
+          <TeamMemberCardTrigger size="md" variant="Tertiary" color="Primary">
-            size="Medium"
-            variant="Tertiary"
-            color="Primary"
-            typography="Body/Paragraph/mdBold"
-          >
             {intl.formatMessage({
               id: "dtmc.showTeamMemberCard",
               defaultMessage: "Show Team Member Card",
@@ -86,7 +81,7 @@ export default async function EmployeeBenefitsCallToActions() {
       <ButtonLink
         href={dtmcLogin[lang]}
         prefetch={false}
-        size="Medium"
+        size="md"
         variant="Tertiary"
         color="Primary"
       >

apps/scandic-web/components/Forms/Edit/Profile/index.tsx

@@ -159,7 +159,7 @@ export default function Form({ user }: EditFormProps) {
               defaultMessage: "Discard unsaved changes?",
             })}
             trigger={
-              <Button variant="Secondary" size="Small" color="Primary">
+              <Button variant="Secondary" size="sm" color="Primary">
                 {intl.formatMessage({
                   id: "editProfile.discardChanges",
                   defaultMessage: "Discard changes",
@@ -171,7 +171,7 @@ export default function Form({ user }: EditFormProps) {
             isDisabled={!isValid || methods.formState.isSubmitting}
             form={formId}
             variant="Primary"
-            size="Small"
+            size="sm"
             color="Primary"
             type="submit"
           >

apps/scandic-web/components/Forms/ProfilingConsent/index.tsx

@@ -166,10 +166,9 @@ export function ProfilingConsent({
           >
             <Button
               type="submit"
-              typography="Body/Paragraph/mdBold"
               variant="Primary"
               color="Primary"
-              size="Medium"
+              size="md"
               isDisabled={!isDirty}
               isPending={isLoading}
             >
@@ -181,11 +180,10 @@ export function ProfilingConsent({
           </Tooltip>
           <Button
             type="button"
-            typography="Body/Paragraph/mdBold"
             variant="Secondary"
             color="Primary"
-            size="Medium"
+            size="md"
-            onClick={() => {
+            onPress={() => {
               backToProfile()
               trackConsentAction({
                 position: "profile",

apps/scandic-web/components/Forms/Signup/index.tsx

@@ -405,7 +405,6 @@ export default function SignupForm({
               type="submit"
               variant="Primary"
               onPress={() => methods.trigger()}
-              typography="Body/Paragraph/mdBold"
               data-testid="trigger-validation"
             >
               {signupButtonText}
@@ -416,7 +415,6 @@ export default function SignupForm({
               type="submit"
               variant="Primary"
               isDisabled={methods.formState.isSubmitting || signup.isPending}
-              typography="Body/Paragraph/mdBold"
               data-testid="submit"
             >
               {signupButtonText}

apps/scandic-web/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx

@@ -90,7 +90,6 @@ export default function MyPagesMenuWrapper() {
           redirectTo={loginPathname}
           loginPosition="top-menu"
           variant="Text"
-          typography="Body/Paragraph/mdBold"
           wrapping={false}
         >
           <Avatar />

apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx

@@ -63,7 +63,6 @@ export default function MegaMenu({
               <ButtonLink
                 href={seeAllLink.url}
                 variant="Text"
-                typography="Body/Paragraph/mdBold"
                 onClick={handleNavigate}
                 wrapping={false}
               >

apps/scandic-web/components/HotelFilterAndSort/index.tsx

@@ -92,11 +92,7 @@ export default function HotelFilterAndSort() {
   return (
     <DialogTrigger onOpenChange={handleClose}>
       <div className={styles.buttonWrapper}>
-        <Button
+        <Button variant="Text" wrapping={false}>
-          variant="Text"
-          wrapping={false}
-          typography="Body/Paragraph/mdBold"
-        >
           <MaterialIcon icon="filter_alt" color="CurrentColor" />
           {intl.formatMessage({
             id: "filter.filterAndSort",
@@ -129,9 +125,12 @@ export default function HotelFilterAndSort() {
                       })}
                     </h3>
                   </Typography>
-                  <IconButton onPress={close} variant="Muted" emphasis>
+                  <IconButton
-                    <MaterialIcon icon="close" color="CurrentColor" />
+                    onPress={close}
-                  </IconButton>
+                    variant="Muted"
+                    emphasis
+                    iconName="close"
+                  />
                 </header>
                 <div className={styles.content}>
                   <Sort sortItems={sortItems} />
@@ -149,11 +148,7 @@ export default function HotelFilterAndSort() {
                   </div>
                 )}
                 <footer className={styles.footer}>
-                  <Button
+                  <Button onPress={clearPendingFilters} variant="Text">
-                    onClick={clearPendingFilters}
-                    variant="Text"
-                    typography="Body/Paragraph/mdBold"
-                  >
                     {intl.formatMessage({
                       id: "filter.clearAllFilters",
                       defaultMessage: "Clear all filters",
@@ -161,10 +156,9 @@ export default function HotelFilterAndSort() {
                   </Button>
                   <Button
                     variant="Tertiary"
-                    size="Large"
+                    size="lg"
                     isDisabled={pendingCount === 0}
                     onPress={() => submitAndClose(close)}
-                    typography="Body/Paragraph/mdBold"
                   >
                     {intl.formatMessage(
                       {

apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx

@@ -78,7 +78,7 @@ export default function AdditionalInfoForm({
           <Button
             type="submit"
             variant="Primary"
-            size="Medium"
+            size="md"
             isDisabled={form.formState.isSubmitting}
           >
             {intl.formatMessage({

apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx

@@ -171,7 +171,7 @@ export default function FindMyBooking({
           <Button
             type="submit"
             variant="Primary"
-            size="Large"
+            size="lg"
             isDisabled={form.formState.isSubmitting || update.isPending}
           >
             {intl.formatMessage({

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/DeliveryDetailsStep/SelectDeliveryTime/index.tsx

@@ -64,7 +64,7 @@ export default function SelectDeliveryTime() {
       <Button
         wrapping={false}
         variant="Text"
-        size="Small"
+        size="sm"
         color="Primary"
         className={styles.changeButton}
         onPress={() => setShowChangeTime(true)}

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/DeliveryDetailsStep/index.tsx

@@ -73,7 +73,7 @@ export default function DeliveryMethodStep() {
             <Button
               wrapping={false}
               variant="Text"
-              size="Small"
+              size="sm"
               color="Primary"
               className={styles.requestButton}
               onPress={() => setShowSpecialRequests(true)}

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Summary/index.tsx

@@ -185,8 +185,7 @@ export default function Summary({ onSubmit }: { onSubmit: () => void }) {
           {isConfirmation && (
             <Button
               type="button"
-              typography="Body/Supporting text (caption)/smBold"
+              size="sm"
-              size="Small"
               variant="Text"
               onPress={togglePriceDetails}
               className={styles.priceButton}
@@ -209,10 +208,9 @@ export default function Summary({ onSubmit }: { onSubmit: () => void }) {
 
           <div className={styles.buttons}>
             <Button
-              typography="Body/Supporting text (caption)/smBold"
               type="button"
               variant="Text"
-              size="Medium"
+              size="sm"
               color="Primary"
               wrapping={false}
               onPress={prevStep}
@@ -220,11 +218,8 @@ export default function Summary({ onSubmit }: { onSubmit: () => void }) {
               {secondaryButtonLabel}
             </Button>
             <Button
-              typography="Body/Supporting text (caption)/smBold"
+              size="sm"
-              size="Medium"
+              isDisabled={isSubmitting}
-              isDisabled={
-                isSubmitting || (isConfirmation && !!Object.keys(errors).length)
-              }
               isPending={isSubmitting}
               onPress={handleNextStep}
               variant={isSingleItem || isConfirmation ? "Primary" : "Secondary"}

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AllAncillariesModal/index.tsx

@@ -24,7 +24,7 @@ export default function AllAncillariesModal() {
     <div>
       <Button
         variant="Text"
-        size="Small"
+        size="sm"
         color="Primary"
         onPress={() => setIsOpen(true)}
       >

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotUpcoming/CustomerSupport.tsx

@@ -11,11 +11,7 @@ export default function CustomerSupport() {
 
   return (
     <DialogTrigger>
-      <Button
+      <Button variant="Secondary" size="sm">
-        variant="Secondary"
-        size="Small"
-        typography="Body/Supporting text (caption)/smBold"
-      >
         {intl.formatMessage({
           id: "common.customerSupport",
           defaultMessage: "Customer support",

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotUpcoming/index.tsx

@@ -46,12 +46,7 @@ export default function NotUpcoming() {
   return (
     <>
       {!isWebview(pathname) && (
-        <ButtonLink
+        <ButtonLink variant="Tertiary" size="md" href={url}>
-          variant="Tertiary"
-          size="Medium"
-          href={url}
-          typography="Body/Supporting text (caption)/smBold"
-        >
           {intl.formatMessage({
             defaultMessage: "Rebook",
             id: "myStay.referenceCard.actions.rebook",

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ActionsButton/index.tsx

@@ -24,7 +24,6 @@ export default function ActionsButton({
       wrapping={false}
       onPress={onPress}
       isDisabled={isDisabled}
-      typography="Body/Paragraph/mdBold"
     >
       <MaterialIcon color="CurrentColor" icon={icon} className={styles.icon} />
       <span>{text}</span>

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/index.tsx

@@ -25,12 +25,7 @@ export default function ManageStay() {
   }
   return (
     <>
-      <Button
+      <Button size="md" variant="Tertiary" onPress={() => setIsOpen(true)}>
-        size="Medium"
-        variant="Tertiary"
-        typography="Body/Supporting text (caption)/smBold"
-        onPress={() => setIsOpen(true)}
-      >
         <span>{manageStay}</span>
         <MaterialIcon color="CurrentColor" icon="keyboard_arrow_down" />
       </Button>

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/index.tsx

@@ -20,10 +20,9 @@ export default function Upcoming() {
       <ManageStay />
       <ButtonLink
         variant="Secondary"
-        size="Medium"
+        size="md"
         target="_blank"
         href={directionsUrl}
-        typography="Body/Supporting text (caption)/smBold"
       >
         <span>
           {intl.formatMessage({

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/GuaranteeInfoModal/index.tsx

@@ -59,8 +59,7 @@ export function GuaranteeInfoModal() {
             className={styles.closeButton}
             variant="Secondary"
             color="Primary"
-            size="Medium"
+            size="md"
-            typography="Body/Paragraph/mdBold"
             onPress={() => setIsOpen(false)}
           >
             {intl.formatMessage({

apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx

@@ -268,13 +268,9 @@ export default function Room({ booking, roomNr, user }: RoomProps) {
                       variant="Muted"
                       emphasis
                       className={styles.termsInfoIcon}
-                    >
+                      iconName="info"
-                      <MaterialIcon
+                      size="md"
-                        icon="info"
+                    />
-                        color="Icon/Default"
-                        size={20}
-                      />
-                    </IconButton>
                   }
                 >
                   <div className={styles.terms}>

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/Terms.tsx

@@ -55,9 +55,8 @@ export default function Terms() {
               emphasis
               size="sm"
               className={styles.button}
-            >
+              iconName="info"
-              <MaterialIcon icon="info" color="Icon/Default" size={20} />
+            />
-            </IconButton>
           }
         >
           <div className={styles.terms}>

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx

@@ -34,7 +34,7 @@ export default function RoomDetailsSidePeek({
     <>
       <Button
         variant="Text"
-        size="Small"
+        size="sm"
         color="Primary"
         wrapping
         onPress={() => {

apps/scandic-web/components/Maps/MapWithButtonWrapper/index.tsx

@@ -14,8 +14,7 @@ export function MapWithButtonWrapper({ children }: React.PropsWithChildren) {
       <FakeButton
         variant="Primary"
         color="Inverted"
-        size="Small"
+        size="sm"
-        typography="Body/Supporting text (caption)/smBold"
         className={styles.button}
       >
         <MaterialIcon icon="map" color="CurrentColor" size={20} />

apps/scandic-web/components/MeetingPackageWidget/index.tsx

@@ -62,12 +62,7 @@ export default function MeetingPackageWidget(props: MeetingPackageWidgetProps) {
                 </span>
               </Typography>
             </span>
-            <FakeButton
+            <FakeButton variant="Primary" size="md" isHovered={isHovered}>
-              variant="Primary"
-              size="Medium"
-              typography="Body/Supporting text (caption)/smBold"
-              isHovered={isHovered}
-            >
               <MaterialIcon icon="search" color="CurrentColor" />
               {intl.formatMessage({
                 id: "bookingWidget.button.search",
@@ -97,9 +92,8 @@ export default function MeetingPackageWidget(props: MeetingPackageWidgetProps) {
                         id: "common.close",
                         defaultMessage: "Close",
                       })}
-                    >
+                      iconName="close"
-                      <MaterialIcon icon="close" />
+                    />
-                    </IconButton>
                   </div>
                   <MeetingPackageWidgetContent {...props} />
                 </>

apps/scandic-web/components/MyPages/CopyMembershipIdButton/index.tsx

@@ -48,7 +48,7 @@ export default function CopyMembershipIdButton({
         onClick={handleCopy}
         className={styles.copyButton}
         variant="Text"
-        size="Small"
+        size="sm"
       >
         <MaterialIcon icon="content_copy" color="CurrentColor" />
       </Button>

apps/scandic-web/components/MyPages/LevelProgressCard/LevelProgressModal/index.tsx

@@ -4,7 +4,7 @@
 import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
-import { IconButton } from "@scandic-hotels/design-system/IconButton" // client only
+import { IconButton } from "@scandic-hotels/design-system/IconButton"; // client only
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Modal from "@scandic-hotels/design-system/Modal"
 import Link from "@scandic-hotels/design-system/OldDSLink"
@@ -35,17 +35,11 @@ export default function LevelProgressModal({
     <Modal
       className={styles.dialog}
       trigger={
-        <IconButton variant="Muted" emphasis>
+        <IconButton
-          <MaterialIcon
+          variant="Muted"
-            className={styles.infoButton}
+          emphasis={color !== "Surface/Brand/Primary 1/OnSurface/Default"}
-            icon="info"
+          iconName="info"
-            color={
+        />
-              color === "Surface/Brand/Primary 1/OnSurface/Default"
-                ? "Icon/Inverted"
-                : "Icon/Interactive/Default"
-            }
-          />
-        </IconButton>
       }
     >
       <div className={styles.levelProgressModal}>

apps/scandic-web/components/MyPages/Profile/index.tsx

@@ -140,12 +140,7 @@ export default async function Profile() {
             </span>
           </h2>
         </Typography>
-        <ButtonLink
+        <ButtonLink size="sm" prefetch={false} href={profileEdit[lang]}>
-          size="Small"
-          prefetch={false}
-          href={profileEdit[lang]}
-          typography="Body/Supporting text (caption)/smBold"
-        >
           {intl.formatMessage({
             id: "myPages.editProfile",
             defaultMessage: "Edit profile",

apps/scandic-web/components/MyPages/ProfilingConsent/Banner/Button.tsx

@@ -18,9 +18,8 @@ export function BannerButton({ cta }: BannerButtonProps) {
     <Button
       variant="Secondary"
       color="Primary"
-      size="Small"
+      size="sm"
-      typography="Body/Supporting text (caption)/smBold"
+      onPress={handleOpenModal}
-      onClick={handleOpenModal}
     >
       {cta}
     </Button>

apps/scandic-web/components/MyPages/ProfilingConsent/Modal/index.tsx

@@ -13,9 +13,9 @@ import { trpc } from "@scandic-hotels/trpc/client"
 
 import { useUpdateProfilingConsent } from "@/hooks/useUpdateProfilingConsent"
 import {
+  setDismissed as persistDismissed,
   profilingConsentOpenEvent,
   readDismissed,
-  setDismissed as persistDismissed,
 } from "@/utils/profilingConsent"
 import { trackConsentAction } from "@/utils/tracking/profilingConsent"
 
@@ -159,10 +159,10 @@ export default function ProfilingConsentModal({
                 <Button
                   type="button"
                   variant="Text"
-                  size="Large"
+                  size="lg"
                   color="Primary"
                   className={styles.closeBtn}
-                  onClick={() => {
+                  onPress={() => {
                     trackConsentAction({ position: "modal", name: "close" })
                     onClose()
                   }}
@@ -216,12 +216,11 @@ export default function ProfilingConsentModal({
                   <Button
                     variant="Primary"
                     color="Primary"
-                    size="Large"
+                    size="lg"
-                    typography="Body/Supporting text (caption)/smRegular"
                     type="button"
                     isDisabled={isLoading}
                     isPending={isLoading && activeChoice === true}
-                    onClick={() => {
+                    onPress={() => {
                       trackConsentAction({
                         position: "modal",
                         name: "accept personalization",
@@ -236,13 +235,12 @@ export default function ProfilingConsentModal({
                   </Button>
                   <Button
                     variant="Secondary"
-                    size="Large"
+                    size="lg"
                     color="Primary"
-                    typography="Body/Supporting text (caption)/smRegular"
                     type="button"
                     isDisabled={isLoading}
                     isPending={isLoading && activeChoice === false}
-                    onClick={() => {
+                    onPress={() => {
                       trackConsentAction({ position: "modal", name: "decline" })
                       handleConsentClick(false)
                     }}

apps/scandic-web/components/MyPages/Surprises/Initial.tsx

@@ -60,9 +60,8 @@ export default function Initial({ totalSurprises, onOpen }: InitialProps) {
       <Button
         variant="Primary"
         onPress={onOpen}
-        size="Medium"
+        size="md"
         autoFocus
-        typography="Body/Paragraph/mdBold"
         className={styles.widthFull}
       >
         {intl.formatMessage(

apps/scandic-web/components/MyPages/Surprises/Navigation.tsx

@@ -20,8 +20,7 @@ export default function Navigation({
         variant="Text"
         isDisabled={selectedSurprise === 0}
         onPress={() => showSurprise(-1)}
-        size="Small"
+        size="sm"
-        typography="Body/Supporting text (caption)/smBold"
       >
         <MaterialIcon
           icon="chevron_right"
@@ -38,8 +37,7 @@ export default function Navigation({
         variant="Text"
         isDisabled={selectedSurprise === totalSurprises - 1}
         onPress={() => showSurprise(1)}
-        size="Small"
+        size="sm"
-        typography="Body/Supporting text (caption)/smBold"
       >
         {intl.formatMessage({
           id: "common.next",

apps/scandic-web/components/Profile/AddCreditCardButton/index.tsx

@@ -100,9 +100,8 @@ export default function AddCreditCardButton() {
       className={styles.addCreditCardButton}
       variant="Text"
       color="Primary"
-      size="Medium"
+      size="md"
-      typography="Body/Paragraph/mdBold"
+      onPress={() =>
-      onClick={() =>
         initiateAddCard.mutate({
           language: lang,
         })

apps/scandic-web/components/Profile/DeleteCreditCardConfirmation.tsx

@@ -2,7 +2,6 @@
 import { useIntl } from "react-intl"
 
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"
 
@@ -77,9 +76,8 @@ export default function DeleteCreditCardConfirmation({
             id: "profile.creditCard.deleteCard",
             defaultMessage: "Delete card",
           })}
-        >
+          iconName="delete"
-          <MaterialIcon icon="delete" color="Icon/Interactive/Default" />
+        />
-        </IconButton>
       }
     />
   )

apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx

@@ -43,8 +43,7 @@ export default function AccessibilityAccordionItem({
             href={accessibilityPageHref}
             variant="Secondary"
             color="Primary"
-            size="Medium"
+            size="md"
-            typography="Body/Paragraph/mdBold"
           >
             {intl.formatMessage({
               id: "accessibility.aboutAccessibility",

apps/scandic-web/components/Sidebar/JoinLoyalty/LoyaltyLoginButton.tsx

@@ -23,7 +23,6 @@ export function LoyaltyLoginButton() {
       redirectTo={loginPathname}
       loginPosition="scandic-friends-sidebar"
       variant="Text"
-      typography="Body/Supporting text (caption)/smBold"
       wrapping={false}
     >
       <MaterialIcon icon="arrow_forward" color="CurrentColor" size={20} />

apps/scandic-web/components/Sidebar/JoinLoyalty/index.tsx

@@ -40,7 +40,7 @@ export default async function JoinLoyaltyContact({
           <Typography variant="Body/Paragraph/mdBold">
             <ButtonLink
               className={styles.button}
-              size="Small"
+              size="sm"
               wrapping
               href={block.button.href}
               target={block.button.openInNewTab ? "_blank" : "_self"}

apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx

@@ -113,12 +113,8 @@ export default function PasswordInput({
                   }
                   aria-controls={field.name}
                   className={styles.toggleButton}
-                >
+                  iconName={isPasswordVisible ? "visibility_off" : "visibility"}
-                  <MaterialIcon
+                />
-                    icon={isPasswordVisible ? "visibility_off" : "visibility"}
-                    size={24}
-                  />
-                </IconButton>
               ) : null}
             </div>
 

apps/scandic-web/components/TempDesignSystem/ShowMoreButton/index.tsx

@@ -17,8 +17,7 @@ interface ShowMoreButtonProps extends ComponentProps<typeof Button> {
 export default function ShowMoreButton({
   variant = "Text",
   color = "Primary",
-  size = "Medium",
+  size = "md",
-  typography = "Body/Paragraph/mdBold",
   showLess,
   textShowMore,
   textShowLess,
@@ -47,7 +46,6 @@ export default function ShowMoreButton({
       color={color}
       size={size}
       onPress={loadMoreData}
-      typography={typography}
       {...props}
     >
       {showLess ? (

apps/scandic-web/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx

@@ -27,8 +27,7 @@ export default function TeaserCardSidepeek({
         onPress={() => setSidePeekIsOpen(true)}
         variant="Secondary"
         color="Primary"
-        size="Small"
+        size="sm"
-        typography="Body/Supporting text (caption)/smBold"
       >
         {button.call_to_action_text}
         <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
@@ -54,8 +53,7 @@ export default function TeaserCardSidepeek({
             <ButtonLink
               variant="Primary"
               color="Primary"
-              size="Small"
+              size="sm"
-              typography="Body/Supporting text (caption)/smBold"
               href={primary_button.href}
               target={primary_button.openInNewTab ? "_blank" : undefined}
             >
@@ -66,8 +64,7 @@ export default function TeaserCardSidepeek({
             <ButtonLink
               variant="Secondary"
               color="Primary"
-              size="Small"
+              size="sm"
-              typography="Body/Supporting text (caption)/smBold"
               href={secondary_button.href}
               target={secondary_button.openInNewTab ? "_blank" : undefined}
             >

apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx

@@ -57,8 +57,7 @@ export default function TeaserCard({
               <ButtonLink
                 variant="Tertiary"
                 color="Primary"
-                size="Small"
+                size="sm"
-                typography="Body/Supporting text (caption)/smBold"
                 className={styles.ctaButton}
                 href={primaryButton.href}
                 target={primaryButton.openInNewTab ? "_blank" : undefined}
@@ -70,8 +69,7 @@ export default function TeaserCard({
               <ButtonLink
                 variant="Secondary"
                 color="Primary"
-                size="Small"
+                size="sm"
-                typography="Body/Supporting text (caption)/smBold"
                 className={styles.ctaButton}
                 href={secondaryButton.href}
                 target={secondaryButton.openInNewTab ? "_blank" : undefined}

packages/booking-flow/lib/components/BookingCodeFilter/index.tsx

@@ -134,13 +134,16 @@ export default function BookingCodeFilter() {
                             })}
                           </h3>
                         </Typography>
-                        <IconButton variant="Muted" emphasis onPress={close}>
+                        <IconButton
-                          <MaterialIcon
+                          variant="Muted"
-                            icon="close"
+                          emphasis
-                            size={24}
+                          onPress={close}
-                            color="CurrentColor"
+                          iconName="close"
-                          />
+                          aria-label={intl.formatMessage({
-                        </IconButton>
+                            id: "common.close",
+                            defaultMessage: "Close",
+                          })}
+                        />
                       </div>
                       <Typography variant="Body/Paragraph/mdRegular">
                         <RadioGroup

packages/booking-flow/lib/components/BookingConfirmation/Header/Actions/AddToCalendarButton.tsx

@@ -8,14 +8,7 @@ export function AddToCalendarButton({ onPress }: { onPress: () => void }) {
   const intl = useIntl()
 
   return (
-    <Button
+    <Button variant="Text" size="sm" color="Primary" onPress={onPress}>
-      variant="Text"
-      size="Small"
-      color="Primary"
-      wrapping
-      typography="Body/Supporting text (caption)/smBold"
-      onPress={onPress}
-    >
       <MaterialIcon size={20} icon="calendar_add_on" color="CurrentColor" />
 
       {intl.formatMessage({

packages/booking-flow/lib/components/BookingConfirmation/Header/Actions/ManageBooking.tsx

@@ -39,9 +39,8 @@ export default function ManageBooking({ booking }: ManageBookingProps) {
     <ButtonLink
       href={myStayURL}
       variant="Text"
-      size="Small"
+      size="sm"
       color="Primary"
-      typography="Body/Supporting text (caption)/smBold"
       wrapping
     >
       <MaterialIcon size={20} icon="edit_square" color="CurrentColor" />

packages/booking-flow/lib/components/BookingConfirmation/Promos/Promo/index.tsx

@@ -26,7 +26,7 @@ export function Promo({ buttonText, href, text, title }: PromoProps) {
         <Typography variant="Body/Paragraph/mdRegular">
           <p className={styles.text}>{text}</p>
         </Typography>
-        <Button size="Small" variant="Secondary" color="Inverted" wrapping>
+        <Button size="sm" variant="Secondary" color="Inverted" wrapping>
           <div>{buttonText}</div>
         </Button>
       </article>

packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/index.tsx

@@ -137,7 +137,6 @@ export function ReceiptRoom({
                   <Button
                     className={styles.termsButton}
                     variant="Text"
-                    typography="Body/Supporting text (caption)/smBold"
                     wrapping={false}
                   >
                     {intl.formatMessage({

packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/Retry.tsx

@@ -24,7 +24,7 @@ export default function Retry({ handleRefetch }: RetryProps) {
         </p>
       </Typography>
 
-      <Button size="Small" onPress={handleRefetch}>
+      <Button size="sm" onPress={handleRefetch}>
         {intl.formatMessage({
           id: "bookingConfirmation.linkedReservation.tryAgain",
           defaultMessage: "Try again",