Implementation:FlowiseAI Flowise RBACButtons

Knowledge Sources	FlowiseAI Flowise
Domains	Authorization, UI Components
Last Updated	2026-02-12 07:00 GMT

Overview

RBACButtons is a collection of permission-gated wrapper components that conditionally render MUI button and navigation elements based on the current user's RBAC permissions and display rules.

Description

This module exports seven higher-order wrapper components: StyledPermissionButton, StyledPermissionToggleButton, PermissionIconButton, PermissionButton, PermissionTab, PermissionMenuItem, and PermissionListItemButton. Each component accepts a permissionId and display prop, checks both hasPermission(permissionId) and hasDisplay(display) via the useAuth hook, and renders nothing (returns null) if either check fails. Otherwise, it passes all remaining props through to the underlying MUI or styled component.

Usage

Use these components as drop-in replacements for standard MUI buttons, tabs, menu items, and list item buttons whenever the UI element should only be visible to users with specific permissions. Pass the permissionId string and optional display array alongside the normal component props.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/button/RBACButtons.jsx
• Lines: 1-82

Signature

export const StyledPermissionButton = ({ permissionId, display, ...props }) => { ... }
export const StyledPermissionToggleButton = ({ permissionId, display, ...props }) => { ... }
export const PermissionIconButton = ({ permissionId, display, ...props }) => { ... }
export const PermissionButton = ({ permissionId, display, ...props }) => { ... }
export const PermissionTab = ({ permissionId, display, ...props }) => { ... }
export const PermissionMenuItem = ({ permissionId, display, ...props }) => { ... }
export const PermissionListItemButton = ({ permissionId, display, ...props }) => { ... }

Import

import {
    StyledPermissionButton,
    StyledPermissionToggleButton,
    PermissionIconButton,
    PermissionButton,
    PermissionTab,
    PermissionMenuItem,
    PermissionListItemButton
} from '@/ui-component/button/RBACButtons'

I/O Contract

Inputs

Name	Type	Required	Description
permissionId	string	No	The permission identifier to check against the user's permissions
display	array	No	Display rule array to check against the user's display settings
...props	any	No	All remaining props are passed through to the underlying MUI component

Outputs

Name	Type	Description
(rendered JSX)	React element or null	The underlying MUI component if permission and display checks pass, otherwise null

Usage Examples

Basic Usage

import { PermissionButton, PermissionMenuItem } from '@/ui-component/button/RBACButtons'

// Only shown if user has 'chatflows:create' permission
<PermissionButton
    permissionId="chatflows:create"
    variant="contained"
    onClick={handleCreate}
>
    Create Chatflow
</PermissionButton>

// Only shown if user has 'tools:delete' permission
<PermissionMenuItem
    permissionId="tools:delete"
    onClick={handleDelete}
>
    Delete Tool
</PermissionMenuItem>

Related Pages

• Principle:FlowiseAI_Flowise_Role_Based_Access_Control