diff --git a/packages/smarthr-ui/src/components/Browser/Browser.tsx b/packages/smarthr-ui/src/components/Browser/Browser.tsx
index 3f6596696e..b8828a8c64 100644
--- a/packages/smarthr-ui/src/components/Browser/Browser.tsx
+++ b/packages/smarthr-ui/src/components/Browser/Browser.tsx
@@ -1,7 +1,7 @@
 import React, { FC, KeyboardEventHandler, useCallback, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { DecoratorsType } from '../../types'
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { Text } from '../Text'
 
 import { BrowserColumn } from './BrowserColumn'
diff --git a/packages/smarthr-ui/src/components/Button/AnchorButton.tsx b/packages/smarthr-ui/src/components/Button/AnchorButton.tsx
index ae08ac1d7f..29c75c689a 100644
--- a/packages/smarthr-ui/src/components/Button/AnchorButton.tsx
+++ b/packages/smarthr-ui/src/components/Button/AnchorButton.tsx
@@ -12,7 +12,6 @@ import { tv } from 'tailwind-variants'
 
 import { ElementRef, ElementRefProps } from '../../types'
 
-import { ButtonInner } from './ButtonInner'
 import { ButtonWrapper } from './ButtonWrapper'
 import { DisabledDetail } from './DisabledDetail'
 import { BaseProps } from './types'
@@ -50,11 +49,7 @@ const AnchorButton = forwardRef(
     }: PropsWithoutRef<Props<T>> & ElementProps<T>,
     ref: Ref<ElementRef<T>>,
   ): ReactElement => {
-    const styles = useMemo(() => anchorButton({ className }), [className])
-    const actualRel = useMemo(
-      () => (rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel),
-      [rel, target],
-    )
+    const style = useMemo(() => anchorButton({ className }), [className])
 
     const button = (
       <ButtonWrapper
@@ -63,16 +58,16 @@ const AnchorButton = forwardRef(
         square={square}
         wide={wide}
         variant={variant}
-        className={styles}
+        className={style}
         target={target}
-        rel={actualRel}
+        rel={rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel}
         isAnchor
         anchorRef={ref}
         elementAs={elementAs}
+        prefix={prefix}
+        suffix={suffix}
       >
-        <ButtonInner prefix={prefix} suffix={suffix} size={size}>
-          {children}
-        </ButtonInner>
+        {children}
       </ButtonWrapper>
     )
 
diff --git a/packages/smarthr-ui/src/components/Button/Button.tsx b/packages/smarthr-ui/src/components/Button/Button.tsx
index 13f3c718e9..83cd07c97b 100644
--- a/packages/smarthr-ui/src/components/Button/Button.tsx
+++ b/packages/smarthr-ui/src/components/Button/Button.tsx
@@ -1,14 +1,13 @@
 'use client'
 
-import React, { ButtonHTMLAttributes, forwardRef, useMemo } from 'react'
+import React, { ButtonHTMLAttributes, PropsWithChildren, forwardRef, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType, useDecorators } from '../../hooks/useDecorators'
 import { usePortal } from '../../hooks/usePortal'
-import { DecoratorsType } from '../../types'
 import { Loader } from '../Loader'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
 
-import { ButtonInner } from './ButtonInner'
 import { ButtonWrapper } from './ButtonWrapper'
 import { DisabledDetail } from './DisabledDetail'
 import { BaseProps } from './types'
@@ -39,10 +38,13 @@ const buttonStyle = tv({
 })
 
 export type Props = {
-  decorators?: DecoratorsType<'loading'>
+  decorators?: DecoratorsType<DecoratorKeyTypes>
 }
 
-const LOADING_TEXT = '処理中'
+const DECORATOR_DEFAULT_TEXTS = {
+  loading: '処理中',
+} as const
+type DecoratorKeyTypes = keyof typeof DECORATOR_DEFAULT_TEXTS
 
 export const Button = forwardRef<HTMLButtonElement, BaseProps & ElementProps & Props>(
   (
@@ -64,24 +66,34 @@ export const Button = forwardRef<HTMLButtonElement, BaseProps & ElementProps & P
     },
     ref,
   ) => {
-    const { wrapper, loader: loaderSlot } = buttonStyle()
-    const wrapperStyle = useMemo(() => wrapper({ className }), [className, wrapper])
-    const loaderStyle = useMemo(
-      () => loaderSlot({ isSecondary: variant === 'secondary' }),
-      [loaderSlot, variant],
-    )
-    const { createPortal } = usePortal()
+    const styles = useMemo(() => {
+      const { wrapper, loader } = buttonStyle()
+
+      return {
+        wrapper: wrapper({ className }),
+        loader: loader({ isSecondary: variant === 'secondary' }),
+      }
+    }, [variant, className])
+
+    let actualPrefix = prefix
+    let actualSuffix = suffix
+    let disabledOnLoading = disabled
+    let actualChildren = children
 
-    const loader = <Loader size="s" className={loaderStyle} role="presentation" />
-    const actualPrefix = !loading && prefix
-    const actualSuffix = loading && !square ? loader : suffix
-    const disabledOnLoading = loading || disabled
-    const actualChildren = loading && square ? loader : children
+    if (loading) {
+      actualPrefix = undefined
+      disabledOnLoading = true
+
+      const loader = <Loader size="s" className={styles.loader} role="presentation" />
+
+      if (square) {
+        actualChildren = loader
+      } else {
+        actualSuffix = loader
+      }
+    }
 
-    const statusText = useMemo(() => {
-      const loadingText = decorators?.loading?.(LOADING_TEXT) ?? LOADING_TEXT
-      return loading ? loadingText : ''
-    }, [decorators, loading])
+    const decorated = useDecorators<DecoratorKeyTypes>(DECORATOR_DEFAULT_TEXTS, decorators)
 
     const button = (
       <ButtonWrapper
@@ -91,18 +103,15 @@ export const Button = forwardRef<HTMLButtonElement, BaseProps & ElementProps & P
         square={square}
         wide={wide}
         variant={variant}
-        className={wrapperStyle}
+        className={styles.wrapper}
         buttonRef={ref}
         disabled={disabledOnLoading}
         $loading={loading}
+        prefix={actualPrefix}
+        suffix={actualSuffix}
       >
-        {
-          // `button` 要素内で live region を使うことはできないので、`role="status"` を持つ要素を外側に配置している。 https://github.com/kufu/smarthr-ui/pull/4558
-          createPortal(<VisuallyHiddenText role="status">{statusText}</VisuallyHiddenText>)
-        }
-        <ButtonInner prefix={actualPrefix} suffix={actualSuffix} size={size}>
-          {actualChildren}
-        </ButtonInner>
+        <LoadingStatus loading={loading}>{decorated.loading}</LoadingStatus>
+        {actualChildren}
       </ButtonWrapper>
     )
 
@@ -115,3 +124,14 @@ export const Button = forwardRef<HTMLButtonElement, BaseProps & ElementProps & P
 )
 // BottomFixedArea での判定に用いるために displayName を明示的に設定する
 Button.displayName = 'Button'
+
+const LoadingStatus = React.memo<PropsWithChildren<{ loading: boolean }>>(
+  ({ loading, children }) => {
+    const { createPortal } = usePortal()
+
+    // `button` 要素内で live region を使うことはできないので、`role="status"` を持つ要素を外側に配置している。 https://github.com/kufu/smarthr-ui/pull/4558
+    return createPortal(
+      <VisuallyHiddenText role="status">{loading && children}</VisuallyHiddenText>,
+    )
+  },
+)
diff --git a/packages/smarthr-ui/src/components/Button/ButtonInner.tsx b/packages/smarthr-ui/src/components/Button/ButtonInner.tsx
deleted file mode 100644
index d217ff42b0..0000000000
--- a/packages/smarthr-ui/src/components/Button/ButtonInner.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { FC, PropsWithChildren, useMemo } from 'react'
-import { tv } from 'tailwind-variants'
-
-export type Props = PropsWithChildren<{
-  prefix?: React.ReactNode
-  suffix?: React.ReactNode
-  size: 'default' | 's'
-}>
-
-const buttonInner = tv({
-  base: [
-    /* LineClamp を併用する場合に、幅を計算してもらうために指定 */
-    'shr-min-w-0',
-  ],
-  variants: {
-    size: {
-      default: '',
-      s: [
-        /* SVG とテキストコンテンツの縦位置を揃えるために指定 */
-        'shr-leading-[0]',
-      ],
-    },
-  },
-})
-
-export const ButtonInner: FC<Props> = ({ prefix, suffix, size, ...props }) => {
-  const styles = useMemo(() => buttonInner({ size }), [size])
-  return (
-    <>
-      {prefix}
-      <span {...props} className={styles} />
-      {suffix}
-    </>
-  )
-}
diff --git a/packages/smarthr-ui/src/components/Button/ButtonWrapper.tsx b/packages/smarthr-ui/src/components/Button/ButtonWrapper.tsx
index d4d83f99ef..9643246dba 100644
--- a/packages/smarthr-ui/src/components/Button/ButtonWrapper.tsx
+++ b/packages/smarthr-ui/src/components/Button/ButtonWrapper.tsx
@@ -3,6 +3,7 @@ import React, {
   ButtonHTMLAttributes,
   ElementType,
   ForwardedRef,
+  PropsWithChildren,
   ReactNode,
   useMemo,
 } from 'react'
@@ -10,16 +11,17 @@ import { tv } from 'tailwind-variants'
 
 import { Variant } from './types'
 
-type BaseProps = {
+type BaseProps = PropsWithChildren<{
   size: 'default' | 's'
   square: boolean
   wide: boolean
   variant: Variant
   $loading?: boolean
   className: string
-  children: ReactNode
   elementAs?: ElementType
-}
+  prefix?: ReactNode
+  suffix?: ReactNode
+}>
 
 type ButtonProps = BaseProps & {
   isAnchor?: never
@@ -33,17 +35,25 @@ type Props =
   | (ButtonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonProps>)
   | (AnchorProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof AnchorProps>)
 
+const EVENT_CANCELLER = (e: React.MouseEvent<HTMLButtonElement>) => {
+  e.preventDefault()
+  e.stopPropagation()
+}
+
 export function ButtonWrapper({
   variant,
   size,
   square,
   wide = false,
   $loading,
+  prefix,
+  suffix,
+  children,
   className,
-  ...props
+  ...rest
 }: Props) {
-  const { buttonStyle, anchorStyle } = useMemo(() => {
-    const { default: defaultButton, anchor } = button({
+  const wrapperStyle = useMemo(() => {
+    const generate = button({
       variant,
       size,
       square,
@@ -51,42 +61,48 @@ export function ButtonWrapper({
       wide,
     })
 
-    return {
-      buttonStyle: defaultButton({ className }),
-      anchorStyle: anchor({ className }),
-    }
-  }, [$loading, className, size, square, variant, wide])
+    const wrapper = rest.isAnchor ? generate.anchor : generate.button
+
+    return wrapper({ className })
+  }, [$loading, size, square, variant, wide, className, rest.isAnchor])
+  const innerStyle = useMemo(() => buttonInner({ size }), [size])
 
-  if (props.isAnchor) {
-    const { anchorRef, elementAs, isAnchor: _, ...others } = props
+  // HINT: 型の関係でisAnchorをrestから展開してしまうとa要素であることを
+  // 自動型づけできなくなってしまう
+  if (rest.isAnchor) {
+    const { anchorRef, elementAs, isAnchor: _, ...others } = rest
     const Component = elementAs || 'a'
 
-    return <Component {...others} className={anchorStyle} ref={anchorRef} />
+    return (
+      <Component {...others} className={wrapperStyle} ref={anchorRef}>
+        {prefix}
+        <span className={innerStyle}>{children}</span>
+        {suffix}
+      </Component>
+    )
   } else {
-    const { buttonRef, disabled, onClick, ...others } = props
+    const { buttonRef, disabled, onClick, ...others } = rest
+
     return (
       // eslint-disable-next-line smarthr/best-practice-for-button-element
       <button
         {...others}
         aria-disabled={disabled}
-        className={buttonStyle}
+        className={wrapperStyle}
         ref={buttonRef}
-        onClick={
-          disabled
-            ? (e) => {
-                e.preventDefault()
-                e.stopPropagation()
-              }
-            : onClick
-        }
-      />
+        onClick={disabled ? EVENT_CANCELLER : onClick}
+      >
+        {prefix}
+        <span className={innerStyle}>{children}</span>
+        {suffix}
+      </button>
     )
   }
 }
 
 const button = tv({
   slots: {
-    default: [
+    button: [
       'aria-disabled:shr-cursor-not-allowed',
       /* alpha color を使用しているので、背景色と干渉させない */
       'aria-disabled:shr-bg-clip-padding',
@@ -127,7 +143,7 @@ const button = tv({
   },
   compoundSlots: [
     {
-      slots: ['default', 'anchor'],
+      slots: ['button', 'anchor'],
       className: [
         'shr-box-border',
         'shr-cursor-pointer',
@@ -154,7 +170,7 @@ const button = tv({
       ],
     },
     {
-      slots: ['default', 'anchor'],
+      slots: ['button', 'anchor'],
       size: 's',
       className: [
         'shr-p-0.5',
@@ -164,34 +180,34 @@ const button = tv({
       ],
     },
     {
-      slots: ['default', 'anchor'],
+      slots: ['button', 'anchor'],
       size: 'default',
       className: ['shr-text-base'],
     },
     {
-      slots: ['default', 'anchor'],
+      slots: ['button', 'anchor'],
       size: 'default',
       square: false,
       className: 'shr-px-1 shr-py-0.75',
     },
     {
-      slots: ['default', 'anchor'],
+      slots: ['button', 'anchor'],
       size: 'default',
       square: true,
       className: 'shr-p-0.75',
     },
     {
-      slots: ['default', 'anchor'],
+      slots: ['button', 'anchor'],
       loading: true,
       className: 'shr-flex-row-reverse',
     },
     {
-      slots: ['default', 'anchor'],
+      slots: ['button', 'anchor'],
       wide: true,
       className: 'shr-w-full',
     },
     {
-      slots: ['default', 'anchor'],
+      slots: ['button', 'anchor'],
       variant: 'primary',
       className: [
         'shr-border-main',
@@ -204,7 +220,7 @@ const button = tv({
       ],
     },
     {
-      slots: ['default'],
+      slots: ['button'],
       variant: 'primary',
       className: [
         'aria-disabled:shr-border-main/50',
@@ -222,7 +238,7 @@ const button = tv({
       ],
     },
     {
-      slots: ['default', 'anchor'],
+      slots: ['button', 'anchor'],
       variant: 'secondary',
       className: [
         'shr-border-default',
@@ -237,7 +253,7 @@ const button = tv({
       ],
     },
     {
-      slots: ['default'],
+      slots: ['button'],
       variant: 'secondary',
       className: [
         'aria-disabled:shr-border-disabled',
@@ -255,7 +271,7 @@ const button = tv({
       ],
     },
     {
-      slots: ['default', 'anchor'],
+      slots: ['button', 'anchor'],
       variant: 'danger',
       className: [
         'shr-border-danger',
@@ -268,7 +284,7 @@ const button = tv({
       ],
     },
     {
-      slots: ['default'],
+      slots: ['button'],
       variant: 'danger',
       className: [
         'aria-disabled:shr-border-danger/50',
@@ -286,7 +302,7 @@ const button = tv({
       ],
     },
     {
-      slots: ['default', 'anchor'],
+      slots: ['button', 'anchor'],
       variant: 'skeleton',
       className: [
         'shr-border-white',
@@ -301,7 +317,7 @@ const button = tv({
       ],
     },
     {
-      slots: ['default'],
+      slots: ['button'],
       variant: 'skeleton',
       className: [
         'aria-disabled:shr-border-white/50',
@@ -319,7 +335,7 @@ const button = tv({
       ],
     },
     {
-      slots: ['default', 'anchor'],
+      slots: ['button', 'anchor'],
       variant: 'text',
       className: [
         'shr-border-transparent',
@@ -330,7 +346,7 @@ const button = tv({
       ],
     },
     {
-      slots: ['default'],
+      slots: ['button'],
       variant: 'text',
       className: [
         'aria-disabled:shr-border-transparent',
@@ -349,3 +365,19 @@ const button = tv({
     },
   ],
 })
+
+const buttonInner = tv({
+  base: [
+    /* LineClamp を併用する場合に、幅を計算してもらうために指定 */
+    'shr-min-w-0',
+  ],
+  variants: {
+    size: {
+      default: '',
+      s: [
+        /* SVG とテキストコンテンツの縦位置を揃えるために指定 */
+        'shr-leading-[0]',
+      ],
+    },
+  },
+})
diff --git a/packages/smarthr-ui/src/components/Button/DisabledDetail.tsx b/packages/smarthr-ui/src/components/Button/DisabledDetail.tsx
index e06fbb279a..b0051e2685 100644
--- a/packages/smarthr-ui/src/components/Button/DisabledDetail.tsx
+++ b/packages/smarthr-ui/src/components/Button/DisabledDetail.tsx
@@ -1,4 +1,4 @@
-import React, { type FC } from 'react'
+import React, { type FC, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
 import { FaCircleInfoIcon } from '../Icon'
@@ -31,21 +31,43 @@ const disabledDetailStyle = tv({
 })
 
 export const DisabledDetail: FC<DisabledDetailProps> = ({ button, disabledDetail }) => {
-  const { disabledWrapper, disabledTooltip } = disabledDetailStyle()
-  const DisabledDetailIcon = disabledDetail.icon ?? FaCircleInfoIcon
+  const styles = useMemo(() => {
+    const { disabledWrapper, disabledTooltip } = disabledDetailStyle()
+
+    return {
+      disabledWrapper: disabledWrapper(),
+      disabledTooltip: disabledTooltip(),
+    }
+  }, [])
 
   return (
-    <div className={disabledWrapper()}>
+    <div className={styles.disabledWrapper}>
       {button}
-      <Tooltip
+      <TooltipIcon
+        icon={disabledDetail.icon}
         message={disabledDetail.message}
-        triggerType="icon"
-        horizontal="auto"
-        vertical="auto"
-        className={disabledTooltip()}
-      >
-        <DisabledDetailIcon />
-      </Tooltip>
+        className={styles.disabledTooltip}
+      />
     </div>
   )
 }
+
+const TooltipIcon = React.memo<{
+  icon?: React.FunctionComponent
+  message: React.ReactNode
+  className: string
+}>(({ icon, message, className }) => {
+  const DisabledDetailIcon = icon ?? FaCircleInfoIcon
+
+  return (
+    <Tooltip
+      message={message}
+      triggerType="icon"
+      horizontal="auto"
+      vertical="auto"
+      className={className}
+    >
+      <DisabledDetailIcon />
+    </Tooltip>
+  )
+})
diff --git a/packages/smarthr-ui/src/components/Button/UnstyledButton.tsx b/packages/smarthr-ui/src/components/Button/UnstyledButton.tsx
index c7f39f51a3..4f8b1ea595 100644
--- a/packages/smarthr-ui/src/components/Button/UnstyledButton.tsx
+++ b/packages/smarthr-ui/src/components/Button/UnstyledButton.tsx
@@ -13,5 +13,6 @@ export const UnstyledButton = forwardRef<
   PropsWithChildren<ComponentProps<'button'>>
 >(({ className, type = 'button', ...props }, ref) => {
   const styles = useMemo(() => unstyledButton({ className }), [className])
+
   return <button {...props} type={type} ref={ref} className={styles} />
 })
diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx
index e304b25962..2b70e06909 100644
--- a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx
@@ -15,6 +15,7 @@ import { useId } from 'react'
 import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { useOuterClick } from '../../../hooks/useOuterClick'
 import { genericsForwardRef } from '../../../libs/util'
 import { textColor } from '../../../themes'
@@ -26,7 +27,6 @@ import { useOptions } from '../useOptions'
 import { MultiSelectedItem } from './MultiSelectedItem'
 import { hasParentElementByClassName } from './multiComboBoxHelper'
 
-import type { DecoratorsType } from '../../../types'
 import type { BaseProps, ComboBoxItem } from '../types'
 
 type Props<T> = BaseProps<T> & {
diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx
index 8898d4dfed..053af77e0b 100644
--- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx
@@ -17,6 +17,7 @@ import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
 import { useClick } from '../../../hooks/useClick'
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { genericsForwardRef } from '../../../libs/util'
 import { textColor } from '../../../themes'
 import { UnstyledButton } from '../../Button'
@@ -25,7 +26,6 @@ import { Input } from '../../Input'
 import { useListBox } from '../useListBox'
 import { useOptions } from '../useOptions'
 
-import type { DecoratorsType } from '../../../types'
 import type { BaseProps, ComboBoxItem } from '../types'
 
 type Props<T> = BaseProps<T> & {
diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
index eca85e675b..bbe874e38c 100644
--- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx
@@ -11,6 +11,7 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { useEnhancedEffect } from '../../hooks/useEnhancedEffect'
 import { usePortal } from '../../hooks/usePortal'
 import { spacing } from '../../themes'
@@ -23,8 +24,6 @@ import { ComboBoxItem, ComboBoxOption } from './types'
 import { useActiveOption } from './useActiveOption'
 import { usePartialRendering } from './usePartialRendering'
 
-import type { DecoratorsType } from '../../types'
-
 type Props<T> = {
   options: Array<ComboBoxOption<T>>
   dropdownHelpMessage?: ReactNode
diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
index 4d83d9a9bf..4492d8cc7e 100644
--- a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
@@ -2,6 +2,7 @@
 
 import React, { type FC, type PropsWithChildren, type ReactNode, useCallback } from 'react'
 
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button } from '../../Button'
 import { Cluster, Stack } from '../../Layout'
 import { ResponseMessage } from '../../ResponseMessage'
@@ -9,7 +10,7 @@ import { DialogBody, type Props as DialogBodyProps } from '../DialogBody'
 import { DialogHeader, type Props as DialogHeaderProps } from '../DialogHeader'
 import { dialogContentInner } from '../dialogInnerStyle'
 
-import type { DecoratorsType, ResponseMessageType } from '../../../types'
+import type { ResponseMessageType } from '../../../types'
 
 export type BaseProps = PropsWithChildren<
   DialogHeaderProps &
diff --git a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx
index be9ba580da..5c6642aa1a 100644
--- a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx
@@ -8,6 +8,7 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button } from '../../Button'
 import { Cluster, Stack } from '../../Layout'
 import { ResponseMessage } from '../../ResponseMessage'
@@ -16,7 +17,7 @@ import { DialogBody, Props as DialogBodyProps } from '../DialogBody'
 import { DialogHeader, type Props as DialogHeaderProps } from '../DialogHeader'
 import { dialogContentInner } from '../dialogInnerStyle'
 
-import type { DecoratorsType, ResponseMessageType } from '../../../types'
+import type { ResponseMessageType } from '../../../types'
 
 export type BaseProps = PropsWithChildren<
   DialogHeaderProps &
diff --git a/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx
index 4b99580ac0..e1e84c0fb0 100644
--- a/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx
@@ -1,13 +1,12 @@
 import React, { type FC } from 'react'
 
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button } from '../../Button'
 import { Cluster, Stack } from '../../Layout'
 import { DialogBody, Props as DialogBodyProps } from '../DialogBody'
 import { DialogHeader, Props as DialogHeaderProps } from '../DialogHeader'
 import { dialogContentInner } from '../dialogInnerStyle'
 
-import type { DecoratorsType } from '../../../types'
-
 export type BaseProps = DialogHeaderProps &
   DialogBodyProps & {
     /** ダイアログの説明 */
diff --git a/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx b/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
index 17598023ef..1b109030ce 100644
--- a/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
@@ -17,6 +17,7 @@ import React, {
 import Draggable from 'react-draggable'
 import { VariantProps, tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { useHandleEscape } from '../../hooks/useHandleEscape'
 import { Base, BaseElementProps } from '../Base'
 import { Button } from '../Button'
@@ -26,8 +27,6 @@ import { DialogBody, type Props as DialogBodyProps } from './DialogBody'
 import { DialogOverlap } from './DialogOverlap'
 import { useDialogPortal } from './useDialogPortal'
 
-import type { DecoratorsType } from '../../types'
-
 type Props = PropsWithChildren<{
   /**
    * ダイアログのヘッダ部分の内容
diff --git a/packages/smarthr-ui/src/components/DropZone/DropZone.tsx b/packages/smarthr-ui/src/components/DropZone/DropZone.tsx
index ead14d1e92..46f2211fb5 100644
--- a/packages/smarthr-ui/src/components/DropZone/DropZone.tsx
+++ b/packages/smarthr-ui/src/components/DropZone/DropZone.tsx
@@ -14,11 +14,10 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { Button } from '../Button'
 import { FaFolderOpenIcon } from '../Icon'
 
-import type { DecoratorsType } from '../../types'
-
 const dropZone = tv({
   slots: {
     wrapper: [
diff --git a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
index 2f4bb4dad5..3cd7f724f5 100644
--- a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
@@ -4,6 +4,7 @@ import React, { ComponentProps, FC, ReactNode, useMemo } from 'react'
 import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorType, type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button, BaseProps as ButtonProps } from '../../Button'
 import { FaCircleCheckIcon, FaFilterIcon, FaRotateLeftIcon } from '../../Icon'
 import { Cluster, Stack } from '../../Layout'
@@ -13,7 +14,7 @@ import { DropdownCloser } from '../DropdownCloser'
 import { DropdownContent } from '../DropdownContent'
 import { DropdownTrigger } from '../DropdownTrigger'
 
-import type { DecoratorType, DecoratorsType, ResponseMessageType } from '../../../types'
+import type { ResponseMessageType } from '../../../types'
 
 type Props = {
   isFiltered?: boolean
diff --git a/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx b/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx
index 56f4dfceb0..f5427ec3c2 100644
--- a/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx
@@ -3,6 +3,7 @@
 import React, { ComponentPropsWithRef } from 'react'
 import { type FC, type MouseEventHandler } from 'react'
 
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button } from '../../Button'
 import { Fieldset } from '../../Fieldset'
 import { FormControl } from '../../FormControl'
@@ -16,8 +17,6 @@ import { DropdownTrigger } from '../DropdownTrigger'
 
 import { useSortDropdown } from './useSortDropdown'
 
-import type { DecoratorsType } from '../../../types'
-
 type SortFieldType = {
   value: string
 } & Omit<React.OptionHTMLAttributes<HTMLOptionElement>, 'value'>
diff --git a/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx b/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx
index 12b702552b..c3f5c8433d 100644
--- a/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx
+++ b/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx
@@ -1,6 +1,7 @@
 import React, { HTMLAttributes, ReactNode, useMemo } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { Button } from '../../Button'
 import { Dropdown, DropdownContent, DropdownTrigger } from '../../Dropdown'
 import { Heading } from '../../Heading'
@@ -9,8 +10,6 @@ import { Cluster, Stack } from '../../Layout'
 import { Section } from '../../SectioningContent'
 import { TextLink } from '../../TextLink'
 
-import type { DecoratorsType } from '../../../types'
-
 type Category = {
   type?: string
   heading: ReactNode
diff --git a/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx b/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx
index 5a54ba387d..1ffa259ef3 100644
--- a/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx
+++ b/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx
@@ -3,12 +3,13 @@
 import React, { HTMLAttributes, useMemo } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { tabbable } from '../../../libs/tabbable'
 import { Button } from '../../Button'
 import { Dropdown, DropdownContent, DropdownTrigger } from '../../Dropdown'
 import { FaCaretDownIcon, FaCheckIcon, FaGlobeIcon, LanguageIcon } from '../../Icon'
 
-import type { DecoratorsType, LocaleMap } from '../../../types'
+import type { LocaleMap } from '../../../types'
 
 export type Props = {
   narrow?: boolean
diff --git a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx
index df3708d612..2628c11239 100644
--- a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx
+++ b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx
@@ -11,6 +11,7 @@ import React, {
 } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { Base, BaseElementProps } from '../Base'
 import { Button } from '../Button'
 import { Heading, HeadingTagTypes } from '../Heading'
@@ -18,8 +19,6 @@ import { FaCaretDownIcon, FaCaretUpIcon } from '../Icon'
 import { Cluster } from '../Layout'
 import { ResponseMessage } from '../ResponseMessage'
 
-import type { DecoratorsType } from '../../types'
-
 type AbstractProps = PropsWithChildren<{
   /** パネルのタイトル */
   title: React.ReactNode
diff --git a/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx b/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx
index b680d91f76..fabcf131b1 100644
--- a/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx
+++ b/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx
@@ -1,11 +1,10 @@
 import React, { ComponentProps, forwardRef, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { FaMagnifyingGlassIcon } from '../../Icon'
 import { InputWithTooltip } from '../InputWithTooltip'
 
-import type { DecoratorsType } from '../../../types'
-
 type Props = Omit<ComponentProps<typeof InputWithTooltip>, 'tooltipMessage' | 'prefix'> & {
   /** 入力欄の説明を紐付けるツールチップに表示するメッセージ */
   tooltipMessage: React.ReactNode
diff --git a/packages/smarthr-ui/src/components/InputFile/InputFile.tsx b/packages/smarthr-ui/src/components/InputFile/InputFile.tsx
index fed78b2c04..44b5b5065d 100644
--- a/packages/smarthr-ui/src/components/InputFile/InputFile.tsx
+++ b/packages/smarthr-ui/src/components/InputFile/InputFile.tsx
@@ -12,13 +12,12 @@ import React, {
 } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { BaseColumn } from '../Base'
 import { Button } from '../Button'
 import { FaFolderOpenIcon, FaTrashCanIcon } from '../Icon'
 import { Stack } from '../Layout'
 
-import type { DecoratorsType } from '../../types'
-
 const inputFile = tv({
   slots: {
     wrapper: 'smarthr-ui-InputFile shr-block',
diff --git a/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx b/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx
index b49355ec5f..08155b824a 100644
--- a/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx
+++ b/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx
@@ -1,11 +1,10 @@
 import React, { ComponentPropsWithoutRef, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorType, type DecoratorsType } from '../../hooks/useDecorators'
 import { Cluster } from '../Layout'
 import { RangeSeparator, Text } from '../Text'
 
-import type { DecoratorType, DecoratorsType } from '../../types'
-
 type Props = {
   start: number
   end: number
diff --git a/packages/smarthr-ui/src/components/Select/Select.tsx b/packages/smarthr-ui/src/components/Select/Select.tsx
index e581883fef..78743469ab 100644
--- a/packages/smarthr-ui/src/components/Select/Select.tsx
+++ b/packages/smarthr-ui/src/components/Select/Select.tsx
@@ -9,12 +9,11 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorType, type DecoratorsType } from '../../hooks/useDecorators'
 import { isIOS, isMobileSafari } from '../../libs/ua'
 import { genericsForwardRef } from '../../libs/util'
 import { FaSortIcon } from '../Icon'
 
-import type { DecoratorType, DecoratorsType } from '../../types'
-
 type Option<T extends string> = {
   value: T
 } & Omit<React.OptionHTMLAttributes<HTMLOptionElement>, 'value'>
diff --git a/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx b/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx
index cc17c4fbdc..06e6da8539 100644
--- a/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx
+++ b/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx
@@ -1,13 +1,12 @@
 import React, { ComponentProps, forwardRef, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { Balloon } from '../Balloon'
 import { CheckBox, Props as CheckBoxProps } from '../CheckBox'
 
 import { Th } from './Th'
 
-import type { DecoratorsType } from '../../types'
-
 type Props = {
   decorators?: DecoratorsType<'checkAllInvisibleLabel'> & {
     checkColumnName?: (text: string) => string
diff --git a/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx b/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx
index 5356e5163c..bca1828f4c 100644
--- a/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx
+++ b/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx
@@ -1,9 +1,8 @@
 import React, { useMemo } from 'react'
 
+import { type DecoratorType, type DecoratorsType } from '../../hooks/useDecorators'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
 
-import type { DecoratorType, DecoratorsType } from '../../types'
-
 type Props = {
   decorators?: DecoratorsType<'text' | 'visuallyHiddenText'>
 }
diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
index 9446a033d2..0496a97bb2 100644
--- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -16,13 +16,12 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType, useDecorators } from '../../hooks/useDecorators'
 import { debounce } from '../../libs/debounce'
 import { lineHeight } from '../../themes'
 import { defaultHtmlFontSize } from '../../themes/createFontSize'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
 
-import type { DecoratorsType } from '../../types'
-
 type Props = {
   /** 入力値にエラーがあるかどうか */
   error?: boolean
@@ -39,13 +38,7 @@ type Props = {
   /** 入力可能な最大文字数。あと何文字入力できるかの表示が追加される。html的なvalidateは発生しない */
   maxLetters?: number
   /** コンポーネント内の文言を変更するための関数を設定 */
-  decorators?: DecoratorsType<
-    | 'beforeMaxLettersCount'
-    | 'afterMaxLettersCount'
-    | 'afterMaxLettersCountExceeded'
-    | 'beforeScreenReaderMaxLettersDescription'
-    | 'afterScreenReaderMaxLettersDescription'
-  >
+  decorators?: DecoratorsType<DecoratorKeyTypes>
   /**
    * @deprecated placeholder属性は非推奨です。別途ヒント用要素の設置を検討してください。
    */
@@ -66,12 +59,14 @@ const getStringLength = (value: string | number | readonly string[]) => {
   return formattedValue.length - (formattedValue.match(surrogatePairs) || []).length
 }
 
-const TEXT_BEFORE_MAXLETTERS_COUNT = 'あと'
-const TEXT_AFTER_MAXLETTERS_COUNT = '文字'
-const TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED = 'オーバー'
-
-const SCREEN_READER_BEFORE_MAXLETTERS_DESCRIPTION = '最大'
-const SCREEN_READER_AFTER_MAXLETTERS_DESCRIPTION = '文字入力できます'
+const DECORATOR_DEFAULT_TEXTS = {
+  beforeMaxLettersCount: 'あと',
+  afterMaxLettersCount: '文字',
+  afterMaxLettersCountExceeded: 'オーバー',
+  beforeScreenReaderMaxLettersDescription: '最大',
+  afterScreenReaderMaxLettersDescription: '文字入力できます',
+} as const
+type DecoratorKeyTypes = keyof typeof DECORATOR_DEFAULT_TEXTS
 
 const textarea = tv({
   slots: {
@@ -141,34 +136,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
     const [count, setCount] = useState(currentValue ? getStringLength(currentValue) : 0)
     const [srCounterMessage, setSrCounterMessage] = useState<ReactNode>('')
 
-    const {
-      afterMaxLettersCount,
-      beforeMaxLettersCount,
-      maxLettersCountExceeded,
-      beforeScreenReaderMaxLettersDescription,
-      afterScreenReaderMaxLettersDescription,
-    } = useMemo(
-      () => ({
-        beforeMaxLettersCount:
-          decorators?.beforeMaxLettersCount?.(TEXT_BEFORE_MAXLETTERS_COUNT) ||
-          TEXT_BEFORE_MAXLETTERS_COUNT,
-        afterMaxLettersCount:
-          decorators?.afterMaxLettersCount?.(TEXT_AFTER_MAXLETTERS_COUNT) ||
-          TEXT_AFTER_MAXLETTERS_COUNT,
-        maxLettersCountExceeded:
-          decorators?.afterMaxLettersCountExceeded?.(TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED) ||
-          TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED,
-        beforeScreenReaderMaxLettersDescription:
-          decorators?.beforeScreenReaderMaxLettersDescription?.(
-            SCREEN_READER_BEFORE_MAXLETTERS_DESCRIPTION,
-          ) || SCREEN_READER_BEFORE_MAXLETTERS_DESCRIPTION,
-        afterScreenReaderMaxLettersDescription:
-          decorators?.afterScreenReaderMaxLettersDescription?.(
-            SCREEN_READER_AFTER_MAXLETTERS_DESCRIPTION,
-          ) || SCREEN_READER_AFTER_MAXLETTERS_DESCRIPTION,
-      }),
-      [decorators],
-    )
+    const decorated = useDecorators<DecoratorKeyTypes>(DECORATOR_DEFAULT_TEXTS, decorators)
 
     const getCounterMessage = useCallback(
       (counterValue: number) => {
@@ -179,8 +147,8 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
           return (
             <>
               {counterValue - maxLetters}
-              {afterMaxLettersCount}
-              {maxLettersCountExceeded}
+              {decorated.afterMaxLettersCount}
+              {decorated.afterMaxLettersCountExceeded}
             </>
           )
         }
@@ -188,13 +156,18 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
         // あと{count}文字
         return (
           <>
-            {beforeMaxLettersCount}
+            {decorated.beforeMaxLettersCount}
             {maxLetters - counterValue}
-            {afterMaxLettersCount}
+            {decorated.afterMaxLettersCount}
           </>
         )
       },
-      [maxLetters, maxLettersCountExceeded, afterMaxLettersCount, beforeMaxLettersCount],
+      [
+        maxLetters,
+        decorated.afterMaxLettersCountExceeded,
+        decorated.afterMaxLettersCount,
+        decorated.beforeMaxLettersCount,
+      ],
     )
 
     const counterVisualMessage = useMemo(() => getCounterMessage(count), [count, getCounterMessage])
@@ -319,9 +292,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
         </span>
         <VisuallyHiddenText aria-live="polite">{srCounterMessage}</VisuallyHiddenText>
         <VisuallyHiddenText id={maxLettersNoticeId}>
-          {beforeScreenReaderMaxLettersDescription}
+          {decorated.beforeScreenReaderMaxLettersDescription}
           {maxLetters}
-          {afterScreenReaderMaxLettersDescription}
+          {decorated.afterScreenReaderMaxLettersDescription}
         </VisuallyHiddenText>
       </span>
     ) : (
diff --git a/packages/smarthr-ui/src/components/Textarea/stories/VRTTextarea.stories.tsx b/packages/smarthr-ui/src/components/Textarea/stories/VRTTextarea.stories.tsx
index cfb0ee5f25..795e7526fb 100644
--- a/packages/smarthr-ui/src/components/Textarea/stories/VRTTextarea.stories.tsx
+++ b/packages/smarthr-ui/src/components/Textarea/stories/VRTTextarea.stories.tsx
@@ -21,6 +21,34 @@ export default {
           <Textarea {...args} maxLetters={5} value="テキスト" />
           <Textarea {...args} maxLetters={5} value="テキストエ" />
           <Textarea {...args} maxLetters={5} value="テキストエリア" />
+          <Textarea
+            {...args}
+            maxLetters={5}
+            value="テキストエ"
+            decorators={{
+              beforeMaxLettersCount: (org) => `beforeMaxLettersCount(${org})`,
+              afterMaxLettersCount: (org) => `afterMaxLettersCount(${org})`,
+              afterMaxLettersCountExceeded: (org) => `afterMaxLettersCountExceeded(${org})`,
+              beforeScreenReaderMaxLettersDescription: (org) =>
+                `beforeScreenReaderMaxLettersDescription(${org})`,
+              afterScreenReaderMaxLettersDescription: (org) =>
+                `afterScreenReaderMaxLettersDescription(${org})`,
+            }}
+          />
+          <Textarea
+            {...args}
+            maxLetters={5}
+            value="テキストエリア"
+            decorators={{
+              beforeMaxLettersCount: (org) => `beforeMaxLettersCount(${org})`,
+              afterMaxLettersCount: (org) => `afterMaxLettersCount(${org})`,
+              afterMaxLettersCountExceeded: (org) => `afterMaxLettersCountExceeded(${org})`,
+              beforeScreenReaderMaxLettersDescription: (org) =>
+                `beforeScreenReaderMaxLettersDescription(${org})`,
+              afterScreenReaderMaxLettersDescription: (org) =>
+                `afterScreenReaderMaxLettersDescription(${org})`,
+            }}
+          />
           <Textarea {...args} placeholder="テキストエリア" />
         </Stack>
       ))}
diff --git a/packages/smarthr-ui/src/hooks/useDecorators.ts b/packages/smarthr-ui/src/hooks/useDecorators.ts
new file mode 100644
index 0000000000..ffc5532bee
--- /dev/null
+++ b/packages/smarthr-ui/src/hooks/useDecorators.ts
@@ -0,0 +1,27 @@
+import { ReactNode, useMemo } from 'react'
+
+export type DecoratorsType<T extends string> = {
+  [K in T]?: DecoratorType
+}
+
+export type DecoratorType = (text: string) => ReactNode
+
+export const useDecorators = <T extends string>(
+  defaultTexts: { [K in T]: string },
+  decorators: DecoratorsType<T> | undefined,
+) =>
+  useMemo(() => {
+    if (!decorators) {
+      return defaultTexts
+    }
+
+    const decorated = {} as { [K in T]: ReactNode }
+
+    for (const key in defaultTexts) {
+      const value = defaultTexts[key]
+
+      decorated[key] = decorators[key]?.(value) || value
+    }
+
+    return decorated
+  }, [decorators, defaultTexts])
diff --git a/packages/smarthr-ui/src/types/Decorator.ts b/packages/smarthr-ui/src/types/Decorator.ts
deleted file mode 100644
index 88ac3b5760..0000000000
--- a/packages/smarthr-ui/src/types/Decorator.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ReactNode } from 'react'
-
-export type DecoratorsType<T extends string> = {
-  [K in T]?: DecoratorType
-}
-
-export type DecoratorType = (text: string) => ReactNode
diff --git a/packages/smarthr-ui/src/types/index.ts b/packages/smarthr-ui/src/types/index.ts
index 0d1950beb6..096eb55fc7 100644
--- a/packages/smarthr-ui/src/types/index.ts
+++ b/packages/smarthr-ui/src/types/index.ts
@@ -1,5 +1,4 @@
 export type { Gap, SeparateGap } from './Gap'
-export type { DecoratorsType, DecoratorType } from './Decorator'
 export type { ResponseMessageType, ResponseMessageTypeWithoutProcessing } from './ResponseMessage'
 export type { LocaleMap } from './Locale'
 export type { ElementRef, ElementRefProps } from './ComponentTypes'