Interactive Buttons for Your Ninox App

The arcCustomButton widget offers you fully configurable buttons that allow you to trigger specific actions in your Ninox database. Whether creating a record, opening a link, displaying a popup, or executing custom JavaScript code – everything is controllable through a flexible action system.

Additionally, you can customize the appearance and behavior of the button: colors, font sizes, icons, spacing, alignment, and hover effects can be controlled via the configuration object. An optional badge (e.g., to display a counter) can also be integrated.

The widget is particularly suitable for:

• interactive dashboards (e.g., quick actions like "create new order"),

• customer cockpits (e.g., "download PDF", "contact support"),

• workflow control (e.g., "change status", "next step"),

• or any other place where you want to make actions visually accessible.

As with all arcWidgets, configuration is done directly via an application code (JSON object) formula field alone, or integrated within another widget.

Complete Application Code

Below you see an exemplary application code for a button:

arcCustomButton({
		uniqueId: "Button " + Nr,
		title: "Neuen Eintrag erstellen",
		width: "",
        height: "",
        alignY: "",  
        alignX: "",
        paddingX: "", 
        paddingY: "",
        gap: "5px",
		icon: arcCustomIcon({
				name: "plus-bold",
				color: "#fff"
			}),
        iconPosition: "left",
		fontSize: "",
		fontColor: "#fff",
		backgroundColor: "#0062AA",
		borderColor: "#0062AA",
		borderRadius: "5px",
		showBadge: false,
		badgeTitle: "",
		badgeColor: "",
		badgeBackground: "",
		badgeBorderColor: "",
		badgePosition: "",
		hoverActions: {
			fontColor: "",
			iconColor: "",
			backgroundColor: "",
			borderColor: "",
			animation: "0.25s"
		},
		actions: [{
				type: "create",
				tableId: "",
				popup: true,
				changeFieldValues: [{
						fieldId: "",
						value: ""
					}, {
						fieldId: "",
						value: ""
					}]
			}]
	})

Explanation of Individual Parameters

Next, you will be detailed on which parameters you can use and what you need to enter for each.

uniqueId (required field)

The uniqueId is a unique identifier of the button within the page. It is used internally for styling (CSS selectors) and for the technical identification of the button.

Type: text
Example: "create-button-123" or "delete " + Nr

This ID should:

• be unique per component (e.g., by combining text and record ID)

• not contain special characters or spaces (they are automatically replaced by dashes internally)

💡 Tip: If you use multiple buttons on a page, e.g., in a list or table, a format like "edit-" + Nr or "btn-" + Nr is recommended.

uniqueId: Nr, 
uniqueId: "Button 1", // Text in "" 

title

The title determines the visible text within the button. It should be formulated briefly and clearly so that users immediately recognize what the button triggers.

Type: text
Example: "Create New Entry" or "Download PDF"

💡 Tip: If you want to create a pure icon button (e.g., just a plus sign), you can simply set title to "".

title: "",

width

The parameter width specifies how wide the button is displayed. If no value is given, the button automatically adjusts to the content.

Type: text (with CSS unit)
Example: "120px", "100%"

💡 Tip: Use "100%" if the button should fill the entire available width of the container – e.g., in responsive layouts or in mobile views.

width: "100%",// Prozent-Werte in "" 
width: "100px",// Pixel-Werte in "" 

height

The parameter height specifies how tall the button is displayed. If no value is given or "auto" is set, the height depends on the content and padding.

Type: text (with CSS unit)
Example: "40px", "auto"

💡 Tip: A fixed height can be helpful if you want to display multiple buttons next to each other at the same height – e.g., in toolbars or tables.

height: "100%", // Prozent-Werte in "" 
height: "100px", // Pixel-Werte in "" 
height: "", // default: auto

alignY & alignX

These two parameters control the alignment of the button within its container – vertically (alignY) and horizontally (alignX). If no values are set, the button is displayed centered by default.

paddingX & paddingY

With these parameters, you set the inner spacing of the button to the text or icon – horizontally (paddingX) and vertically (paddingY). If no values are set, the default spacings of the widget apply.

Type: text (with CSS unit, e.g., px, em, %)

💡 Tip: With paddingX, you can visually influence the button width – regardless of width. paddingY provides comfortable click areas, especially on touch devices.

gap

The parameter gap specifies the space between text and icon inside the button. If no value is set, the default gap is 5px.

Type: text (with CSS unit, e.g., px, em)
Example: "4px", "0.5em", "8px"

💡 Tip: If you use buttons with only text or only an icon, you can skip gap – it only becomes relevant when both elements are present.

gap: "10px", // z.B. Pixel-Werte
gap: "", // default: 5px

icon

The parameter icon allows you to add any icon to the button. The icon is created using the arcCustomIcon widget and can be freely designed (name, color, size, etc.). Through your User Cockpit, you can select your desired icons that you want to use.

Type: Widget (arcCustomIcon)
Example:

icon: arcCustomIcon({
				name: "plus-bold",
				color: "#fff"
			}), // arcCustomIcon einsetzen, um Icon einzufügen. 
icon: "", // default: Kein Icon wird ausgegeben.

💡 Tip: You can also use the button without text (title: "") and display it only via an icon – ideal for compact toolbars or icon bars.

iconPosition

The parameter iconPosition specifies where the icon is displayed in relation to the text. If no value is set, the icon is displayed to the left of the text.

Type: text
Example:

iconPosition: "left", // Icon erscheint links vom Text.
iconPosition: "right", // Icon erscheint rechts vom Text.
iconPosition: "top", // Icon erscheint oben vom Text.
iconPosition: "buttom", // Icon erscheint unten vom Text.

iconPosition: "", // default: links

fontSize

The parameter fontSize sets the font size of the button text. If no value is set, the default size is 13px.

Type: text (with CSS unit)
Example: "14px"

💡 Tip: If you use buttons in different contexts (e.g., in cards or lists), you can create a visual hierarchy with fontSize – e.g., smaller buttons for secondary actions, larger for central functions.

fontSize: "18px",// Pixel-Werte in ""

fontColor

The parameter fontColor sets the color of the button text. If no value is set, a dark gray (#515971) is used by default.

Type: text (Hex code or CSS color name)
Example: "#ffffff", "black", "rgb(255, 0, 0)"

💡 Tip: Pay attention to sufficient contrast with the background color (backgroundColor) to ensure readability and accessibility – especially with colored buttons or dark themes.

fontColor: "#ffffff", // HEX-Wert in ""

backgroundColor

The parameter backgroundColor defines the background color of the button. If no value is specified, the widget uses a light gray (#F7F8FC) by default.

Type: text (Hex code or CSS color name)
Example: "#0062AA", "white", "rgba(0, 0, 0, 0.1)"

💡 Tip: For clear visual feedback on actions, a strong color tone is recommended – ideally in combination with white text (fontColor: "#ffffff").

backgroundColor: "#4970ff", // HEX-Wert in ""

borderColor

The parameter borderColor sets the border color of the button. If no value is specified, a subtle light gray is used by default (#E9ECF4).

Type: text (Hex code or CSS color name)
Example: "#0062AA", "transparent", "rgba(0, 0, 0, 0.2)"

💡 Tip: If you want to design a completely flat button without a visible border, you can set borderColor to "transparent" – or to match the background color.

 borderColor: "#EEEEEE", // HEX-Wert in ""

borderRadius

The parameter borderRadius determines how round the corners of the button are. If no value is set, the widget uses 3px by default.

Type: text (with CSS unit)
Example: "0px" (rectangular), "5px" (slightly rounded), "50px" (pill-shaped)

💡 Tip: For modern UI elements, slightly rounded corners (4–8px) are suitable.

 borderRadius: "50px", // 50px = ganz abgerundet // default Wert sind: 3px

embedded

The parameter embedded controls whether the widget is embedded within another widget (e.g., in a card or layout container).

Type: boolean (true / false)
Default value: false

embedded: false, // ermöglicht den Standalone Einsatz des Widgets (nicht eingebettet in anderen Widgets)
embedded: true,  // Fallback

Badge

With the badge system, you can add a small additional marker to the button – e.g., a counter, a label (“New”, “!”, “3”), or a symbol for special notices. The badge is displayed visually distinct and can be adjusted in color and position.

hoverActions

With hoverActions, you can define how the button visually behaves when the user hovers over it (“hover effect”). You can specifically change color, border, and animations – both for the button itself and the icon.

hoverActions: {
	fontColor: "#ffffff",
	iconColor: "#ffffff",
	backgroundColor: "#0062AA",
	borderColor: "#0062AA",
	animation: "0.1s"
},

💡 Tip: If you don't need any hover effects at all, you can completely omit hoverActions. If your button has a light background color, it's advisable to use a darker shade on hover with white text to increase interactivity and contrast. This makes the action visually clear and more accessible.

actions ✅

With the parameter actions, you define what should happen when the button is clicked. You can register one or more actions – from simply opening a URL to creating new records to executing custom JavaScript.

Type: List of Objects (array with at least one action object)
Structure of an Action: Each action is an object with at least the type field – depending on the type, additional fields are required or optional.

Supported Action Types

{type: "openUrl", 
value: "https://example.com" }

{ type: "openRecord", 
  recordId: first(select Dashboard).Nr}

{ type: "openFullscreen",
  recordId: Nr, 
  tab: "Details" }

{ type: "popup",
recordId: Nr,
tab: "Info" }

{ type: "closeRecord", 
  recordId: Nr }

{ type: "closeFullscreen",
  recordId: Nr }

{ type: "closeAllRecords" }

{ type: "delete",
recordId: Nr }

{ type: "update", 
recordId: Auftrag.Nr, 
field: "A1", 
value: "Erledigt" }

{ type: "create", 
tableId: "A", 
popup: true, 
changeFieldValues: [{ fieldId: "AZ", 
                      value: "Neu" }] }

{ type: "customJS", 
value: "alert('Hallo Welt!');" }

💡 Tip: You can execute multiple actions one after the other by combining them in the array. The execution occurs in the order in which they are specified in the array.

Conclusion

The arcCustomButton widget is a versatile tool for making actions visible and interactive in your Ninox app – whether you want to create simple links, complex workflows, or visually appealing dashboards. Thanks to the flexible design options and powerful action system, the button can be seamlessly integrated into existing layouts and components.

💡 Pro Tip: In combination with other arcWidgets – e.g., arcCustomText or arcCustomCard – you can develop complete UI components that are both functional and visually impressive.