To hide a single button on your custom Ory settings page while leaving others untouched, you need to customize the rendering of UI nodes in your React component. Ory Elements renders buttons using the node type system, and you can override how specific nodes are displayed by providing custom components via the

components

prop to the

<Settings />

component. ### How Ory Elements Renders Buttons Ory Elements uses a set of default components for each node type, including buttons. The mapping is defined in the

Node

property of

OryFlowComponents

, where the

Button

node is rendered using the

OryNodeButtonProps

component. You can override this by providing your own implementation for the

Button

node via the

components

prop in the

<Settings />

component. This allows you to control the rendering of each button individually, based on its attributes (such as its name, value, or other properties) [OryFlowComponents Node](https://www.ory.sh/docs/elements/reference/@ory/elements-react/type-aliases/OryFlowComponents#node). ### Example: Hiding a Specific Button Suppose you want to hide a button with a specific name or value. You can create a custom button component that checks the node's attributes and conditionally renders nothing for the button you want to hide.

jsx import { Settings } from "@ory/elements-react/theme" import { Node } from "@ory/elements-react" import React from "react"  // Custom Button component const CustomButton = (props) => {   // Example: Hide the button with name "my_hidden_button"   if (props.node.attributes.name === "my_hidden_button") {     return null   }   // Otherwise, render the default button   return <Node.Button {...props} /> }  // Usage in your settings page function CustomSettingsPage({ flow, config }) {   return (     <Settings       flow={flow}       config={config}       components={{         Node: {           ...Node,           Button: CustomButton, // Override only the Button node         },       }}     />   ) }

- Replace

"my_hidden_button"

with the actual name or attribute of the button you want to hide. - All other buttons will be rendered as usual using the default implementation. ### How to Identify the Button You can inspect the

node

prop passed to your custom button component to determine which button it is (e.g., by checking

node.attributes.name

,

node.attributes.value

, or other identifying properties). ### References - The

Settings

component and how to override node components: [Settings Component Reference](https://www.ory.sh/docs/elements/reference/@ory/elements-react/theme/functions/Settings) - Node type mapping and customization: [OryFlowComponents Node](https://www.ory.sh/docs/elements/reference/@ory/elements-react/type-aliases/OryFlowComponents#node) If you need to see what the default button looks like, you can refer to the default theme implementation or use the default

Node.Button

as shown above. The knowledge sources do not provide the exact code for the default button, but this override pattern is the recommended approach for customizing individual node rendering in Ory Elements.

New message text here