diff --git a/spug_web/src/components/AuthButton.js b/spug_web/src/components/AuthButton.js
index d9d0e4d..58a678f 100644
--- a/spug_web/src/components/AuthButton.js
+++ b/spug_web/src/components/AuthButton.js
@@ -13,5 +13,5 @@ export default function AuthButton(props) {
   if (props.auth && !hasPermission(props.auth)) {
     disabled = true;
   }
-  return props.hide && disabled ? null : <Button {...props} disabled={disabled}>{props.children}</Button>
+  return <Button {...props} disabled={disabled}>{props.children}</Button>
 }
diff --git a/spug_web/src/components/AuthFragment.js b/spug_web/src/components/AuthFragment.js
new file mode 100644
index 0000000..5b582d8
--- /dev/null
+++ b/spug_web/src/components/AuthFragment.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
+ * Copyright (c) <spug.dev@gmail.com>
+ * Released under the MIT License.
+ */
+import React from 'react';
+import { hasPermission } from "../libs";
+
+
+export default function AuthFragment(props) {
+  return hasPermission(props.auth) ? <React.Fragment>{props.children}</React.Fragment> : null
+}
diff --git a/spug_web/src/components/index.js b/spug_web/src/components/index.js
index 0e302cb..b16a3ee 100644
--- a/spug_web/src/components/index.js
+++ b/spug_web/src/components/index.js
@@ -7,6 +7,7 @@ import StatisticsCard from './StatisticsCard';
 import SearchForm from './SearchForm';
 import LinkButton from './LinkButton';
 import AuthButton from './AuthButton';
+import AuthFragment from './AuthFragment';
 import AuthLink from './AuthLink';
 import AuthCard from './AuthCard';
 import AuthDiv from './AuthDiv';
@@ -14,6 +15,7 @@ import ACEditor from './ACEditor';
 
 export {
   StatisticsCard,
+  AuthFragment,
   SearchForm,
   LinkButton,
   AuthButton,