marmelab/react-admin · error

<CreateButton> components should be used inside a <Resource>

Error message

<CreateButton> components should be used inside a <Resource> component or provided the resource prop.

What it means

CreateButton navigates to the create route of a resource; it resolves the resource via useResourceContext. Without a resource in context or via the resource prop, the target route and access control check are undefined, so it throws.

Source

Thrown at packages/ra-ui-materialui/src/button/CreateButton.tsx:60

        props: inProps,
        name: PREFIX,
    });
    const {
        className,
        icon = defaultIcon,
        label: labelProp,
        resource: resourceProp,
        scrollToTop = true,
        variant,
        to: locationDescriptor,
        state: initialState = {},
        ...rest
    } = props;

    const resource = useResourceContext(props);

    if (!resource) {
        throw new Error(
            '<CreateButton> components should be used inside a <Resource> component or provided the resource prop.'
        );
    }

    const { canAccess, isPending } = useCanAccess({
        action: 'create',
        resource,
    });
    const createPath = useCreatePath();
    const getResourceLabel = useGetResourceLabel();
    const label = useResourceTranslation({
        resourceI18nKey: `resources.${resource}.action.create`,
        baseI18nKey: 'ra.action.create',
        options: {
            name: getResourceLabel(resource, 1),
        },
        userText: labelProp,
    });

View on GitHub (pinned to 051f511bb0)

Solutions

1. Pass the resource prop: <CreateButton resource="posts" />
2. Wrap in <ResourceContextProvider value="posts"> or render inside a Resource-scoped page/List
3. In app-level layouts, derive the current resource from the route and pass it down

Example fix

// before
<AppBar><CreateButton /></AppBar>

// after
<CreateButton resource="posts" />

if (!resource) return <CreateButton resource="posts" />; // supply explicit resource

const hasResource = (p: { resource?: string }): p is { resource: string } =>
  typeof p.resource === 'string' && p.resource.length > 0;

try {
  return <CreateButton {...props} />;
} catch (e) {
  if (e.message.includes('CreateButton')) {
    return <CreateButton resource={defaultResource} {...props} />;
  }
  throw e;
}

When it happens

Trigger: Rendering <CreateButton /> on a custom page or layout outside any Resource/List context without a resource prop; using it inside <Admin>'s global layout (e.g. a top bar) where no resource context exists.

Common situations: Custom headers/action bars rendered app-wide; dashboards with entity-specific buttons missing the resource prop; test setups mounting the button standalone.

Related errors

• <BulkDeleteButton> components should be used inside a <Resou
• <DeleteButton> components should be used inside a <Resource>
• <DeleteWithConfirmButton> components should be used inside a
• <DeleteWithUndoButton> components should be used inside a <R
• <EditButton> components should be used inside a <Resource> c

AI-assisted analysis of marmelab/react-admin@051f511bb0 (2026-08-30). Data as JSON: /api/errors/38cd2b9eeeee2929. Report an issue: GitHub.