Logout Page

The Logout component is used to create logout confirmation pages with customizable messages and button text.

Basic Usage

The most basic logout page includes a title, confirmation message, and action buttons.

              import { Logout } from '@coffic/cosy-ui';

<Logout />
            

Custom Styles

You can customize the style and content of the logout page through custom class names and slots.

示例 1

确认退出系统

退出后需要重新登录才能访问系统。您的所有未保存的工作将会丢失。

确认退出系统 继续工作

遇到问题？联系支持

              import { Logout, getAvatarImage } from '@coffic/cosy-ui';

const logoUrl = getAvatarImage({
  name: 'logo',
  type: 'rounded',
});

<Logout
  title="确认退出系统"
  message="退出后需要重新登录才能访问系统。您的所有未保存的工作将会丢失。"
  logo={logoUrl}
  confirmText="确认退出系统"
  cancelText="继续工作"
  customClass="custom-logout"
>
  <div slot="footer" class="cosy:text-center cosy:mt-4 cosy:text-sm cosy:text-base-content/60">
    遇到问题？<a href="#" class="cosy:text-primary cosy:hover:text-primary-focus">联系支持</a>
  </div>
</Logout>
            

Props

Basic Properties

• title (string, optional) - Page title, defaults to “Logout”
• message (string, optional) - Confirmation message, defaults to “Are you sure you want to log out?”
• logo (string, optional) - Path to the logo image

Button Text

• confirmText (string, optional) - Confirm button text, defaults to “Logout”
• cancelText (string, optional) - Cancel button text, defaults to “Cancel”

Style Customization

• customClass (string, optional) - Custom CSS class name

Slots

The component provides the following slots for custom content:

• header - Custom header content
• footer - Custom footer content

Best Practices

1. User Experience

   • Provide clear logout confirmation messages
   • Ensure button text clearly conveys the action
   • Give users the option to cancel the operation

2. Style Guidelines

   • Use warning colors (e.g., red) for the confirm button
   • Keep the page layout clean and simple
   • Use icons appropriately to enhance visual feedback

3. Functionality Tips

   • Remind users to save unsaved work before logging out
   • Provide help links or support information
   • Consider adding “Remember me” option for future logins