Mini Widgets
Button
Interaktive Buttons für deine Ninox-App

Das arcCustomButton
-Widget bietet dir voll konfigurierbare Buttons, mit denen du in deiner Ninox-Datenbank gezielt Aktionen auslösen kannst. Ob Datensatz erstellen, Link öffnen, Popup anzeigen oder benutzerdefinierten JavaScript-Code ausführen – alles ist über ein flexibles Aktionssystem steuerbar.
Zusätzlich kannst du Aussehen und Verhalten des Buttons individuell gestalten: Farben, Schriftgrößen, Icons, Abstände, Ausrichtung und Hover-Effekte lassen sich per Konfigurationsobjekt steuern. Auch ein optionales Badge (z. B. zur Anzeige eines Counters) ist integrierbar.
Das Widget eignet sich besonders für:
interaktive Dashboards (z. B. Schnellaktionen wie „neuen Auftrag anlegen“),
Kundencockpits (z. B. „PDF herunterladen“, „Support kontaktieren“),
Workflow-Steuerung (z. B. „Status ändern“, „Nächster Schritt“),
oder jede andere Stelle, an der du Aktionen visuell zugänglich machen willst.
Wie bei allen arcWidgets erfolgt die Konfiguration direkt über einen Anwendungscode (JSON-Objekt) Formel-Feld solo, bzw. in einem anderen Widget integriert.
Gesamter Anwendungscode

Folgend siehst du einen beispielhaften Anwendungscode für einen Button:
Erklärung einzelner Parameter
Folgend wird dir aufgeschlüsselt, welche Parameter du verwenden kannst und was du jeweils eintragen musst.
uniqueId (Pflichtfeld)
Die uniqueId
ist eine eindeutige Kennung des Buttons innerhalb der Seite. Sie wird intern für das Styling (CSS-Selektoren) und zur technischen Identifizierung des Buttons verwendet.
Typ: text
Beispiel: "create-button-123"
oder "delete " + Nr
Diese ID sollte:
pro Komponente eindeutig sein (z. B. durch Kombination aus Text und Datensatz-ID)
keine Sonderzeichen oder Leerzeichen enthalten (werden intern automatisch durch Bindestriche ersetzt)
💡 Tipp: Wenn du mehrere Buttons auf einer Seite nutzt, z. B. in einer Liste oder Tabelle, empfiehlt sich ein Format wie "edit-" + Nr
oder "btn-" + Nr
.
title
Der title
bestimmt den sichtbaren Text innerhalb des Buttons. Er sollte kurz und eindeutig formuliert sein, damit Nutzer sofort erkennen, was der Button auslöst.
Typ: text
Beispiel: "Neuen Eintrag erstellen"
oder "PDF herunterladen"
💡 Tipp: Wenn du einen reinen Icon-Button erstellen möchtest (z. B. nur ein Plus-Symbol), kannst du title
einfach auf ""
setzen.
width
Der Parameter width
legt fest, wie breit der Button dargestellt wird. Wenn kein Wert angegeben wird, passt sich der Button automatisch dem Inhalt an.
Typ: text (mit CSS-Einheit)
Beispiel: "120px"
, "100%"
💡 Tipp: Verwende "100%"
, wenn der Button die gesamte verfügbare Breite des Containers ausfüllen soll – z. B. bei responsiven Layout oder in mobilen Ansichten.
height
Der Parameter height
legt fest, wie hoch der Button dargestellt wird. Wenn kein Wert angegeben wird oder "auto"
gesetzt ist, richtet sich die Höhe nach dem Inhalt und dem Padding.
Typ: text (mit CSS-Einheit)
Beispiel: "40px"
, "auto"
💡 Tipp: Eine feste Höhe kann hilfreich sein, wenn du mehrere Buttons nebeneinander gleich hoch darstellen möchtest – z. B. in Toolbars oder Tabellen.
alignY & alignX
Diese beiden Parameter steuern die Ausrichtung des Buttons innerhalb seines Containers – vertikal (alignY
) und horizontal (alignX
). Wenn keine Werte gesetzt sind, wird der Button standardmäßig zentriert angezeigt.
Parameter | Mögliche Werte | Beschreibung |
---|---|---|
|
| Oben ausgerichtet |
| Vertikal zentriert (Standard) | |
| Unten ausgerichtet | |
|
| Links ausgerichtet |
| Horizontal zentriert (Standard) | |
| Rechts ausgerichtet |
paddingX & paddingY
Mit diesen Parametern legst du den inneren Abstand des Buttons zum Text bzw. Icon fest – horizontal (paddingX
) und vertikal (paddingY
). Wenn keine Werte gesetzt sind, gelten die Standardabstände des Widgets.
Typ: text (mit CSS-Einheit, z. B. px
, em
, %
)
Parameter | Wirkung | Beispielwerte |
---|---|---|
| Horizontaler Innenabstand (links und rechts) |
|
| Vertikaler Innenabstand (oben und unten) |
|
💡 Tipp: Mit paddingX
kannst du die Buttonbreite optisch beeinflussen – unabhängig von width
. paddingY
sorgt für angenehme Klickflächen, besonders auf Touch-Geräten.
gap
Der Parameter gap
legt den Abstand zwischen Text und Icon im Inneren des Buttons fest. Wenn kein Wert gesetzt ist, beträgt der Standardabstand 5px
.
Typ: text (mit CSS-Einheit, z. B. px
, em
)
Beispiel: "4px"
, "0.5em"
, "8px"
💡 Tipp: Wenn du Buttons mit nur Text oder nur Icon verwendest, kannst du gap
auch weglassen – relevant wird er nur, wenn beide Elemente vorhanden sind.
icon
Der Parameter icon
ermöglicht es, dem Button ein beliebiges Icon hinzuzufügen. Das Icon wird mit Hilfe des Widgets arcCustomIcon erzeugt und kann frei gestaltet werden (Name, Farbe, Größe etc.). Über dein User Cockpit kannst du deine Wunsch Icons auswählen, die du verwenden möchtest.
Typ: Widget (arcCustomIcon
)
Beispiel:
💡 Tipp: Du kannst den Button auch ohne Text verwenden (title: ""
) und nur über ein Icon darstellen – ideal für kompakte Toolbars oder Symbolleisten.
iconPosition
Der Parameter iconPosition
legt fest, wo das Icon im Verhältnis zum Text angezeigt wird. Wenn kein Wert gesetzt ist, wird das Icon links vom Text dargestellt.
Typ: text
Beispiel:
fontSize
Der Parameter fontSize
legt die Schriftgröße des Button-Texts fest. Wird kein Wert gesetzt, beträgt die Standardgröße 13px
.
Typ: text (mit CSS-Einheit)
Beispiel: "14px"
💡 Tipp: Wenn du Buttons in unterschiedlichen Kontexten einsetzt (z. B. in Karten oder Listen), kannst du mit fontSize
eine visuelle Hierarchie erzeugen – z. B. kleinere Buttons für Nebenaktionen, größere für zentrale Funktionen.
fontColor
Der Parameter fontColor
legt die Farbe des Button-Texts fest. Wenn kein Wert gesetzt ist, wird standardmäßig ein dunkles Grau (#515971
) verwendet.
Typ: text (Hex-Code oder CSS-Farbname)
Beispiel: "#ffffff"
, "black"
, "rgb(255, 0, 0)"
💡 Tipp: Achte auf ausreichenden Kontrast zur Hintergrundfarbe (backgroundColor
), um Lesbarkeit und Barrierefreiheit sicherzustellen – besonders bei farbigen Buttons oder dunklen Themes.
backgroundColor
Der Parameter backgroundColor
definiert die Hintergrundfarbe des Buttons. Wenn kein Wert angegeben wird, verwendet das Widget standardmäßig ein helles Grau (#F7F8FC
).
Typ: text (Hex-Code oder CSS-Farbname)
Beispiel: "#0062AA"
, "white"
, "rgba(0, 0, 0, 0.1)"
💡 Tipp: Für eine klare visuelle Rückmeldung bei Aktionen empfiehlt sich ein kräftiger Farbton – ideal in Kombination mit weißer Schrift (fontColor: "#ffffff"
).
borderColor
Der Parameter borderColor
legt die Rahmenfarbe des Buttons fest. Wenn kein Wert angegeben wird, wird standardmäßig ein dezentes Hellgrau verwendet (#E9ECF4
).
Typ: text (Hex-Code oder CSS-Farbname)
Beispiel: "#0062AA"
, "transparent"
, "rgba(0, 0, 0, 0.2)"
💡 Tipp: Wenn du einen vollständig flächigen Button ohne sichtbaren Rahmen gestalten möchtest, kannst du borderColor
auf "transparent"
setzen – oder passend zur Hintergrundfarbe.
borderRadius
Der Parameter borderRadius
bestimmt, wie stark die Ecken des Buttons abgerundet sind. Wird kein Wert gesetzt, verwendet das Widget standardmäßig 3px
.
Typ: text (mit CSS-Einheit)
Beispiel: "0px"
(rechteckig), "5px"
(leicht abgerundet), "50px"
(pillenförmig)
💡 Tipp: Für moderne UI-Elemente eignen sich leicht abgerundete Ecken (4–8px
).
embedded
Der Parameter embedded
steuert, ob das Widget innerhalb eines anderen Widgets (z. B. in einer Karte oder einem Layout-Container) eingebettet ist.
Typ: boolean (true
/ false
)
Standardwert: false
Badge
Mit dem Badge-System kannst du dem Button eine kleine Zusatzmarkierung hinzufügen – z. B. einen Zähler, ein Label („Neu“, „!“, „3“), oder ein Symbol für besondere Hinweise. Der Badge wird optisch abgesetzt dargestellt und lässt sich farblich sowie in der Position anpassen.
Parameter | Typ | Beschreibung |
---|---|---|
| boolean | Legt fest, ob ein Badge angezeigt wird ( |
| text | Text oder Zahl im Badge |
| text | Textfarbe im Badge (z. B. |
| text | Hintergrundfarbe des Badges (z. B. |
| text | Rahmenfarbe des Badges (z. B. |
| text | Zusätzliche Positionierung des Badges (z. B. |
hoverActions
Mit hoverActions
kannst du definieren, wie sich der Button visuell verhält, wenn der Nutzer mit der Maus darüberfährt („Hover-Effekt“). Du kannst damit gezielt Farbe, Rahmen und Animation verändern – sowohl für den Button selbst als auch das Icon.
💡 Tipp: Wenn du gar keine Hover-Effekte brauchst, kannst du hoverActions
komplett weglassen. Wenn dein Button eine helle Hintergrundfarbe hat, empfiehlt sich beim Hover ein dunklerer Farbton mit weißem Text, um Interaktivität und Kontrast zu erhöhen. So wird die Aktion visuell klar erkennbar und barriereärmer.
Feld | Typ | Beschreibung | Beispielwert |
---|---|---|---|
| text | Textfarbe beim Hover |
|
| text | Hintergrundfarbe beim Hover |
|
| text | Rahmenfarbe beim Hover |
|
| text | Farbe des Icons beim Hover (nur bei SVG-Icons relevant) |
|
| text | CSS-Transition-Zeit für sanfte Effekte |
|
actions ✅
Mit dem Parameter actions
definierst du, was passieren soll, wenn der Button geklickt wird. Du kannst eine oder mehrere Aktionen hinterlegen – von einfachem URL-Öffnen über das Erstellen neuer Datensätze bis hin zu benutzerdefiniertem JavaScript.
Typ: Liste von Objekten (Array mit mindestens einem Action-Objekt)
Aufbau einer Action: Jede Action ist ein Objekt mit mindestens dem Feld type
– je nach Typ sind weitere Felder erforderlich oder optional.
Unterstützte Aktionstypen
| Beschreibung | Code-Beispiel |
---|---|---|
| Öffnet einen externen Link in einem neuen Tab | |
| Öffnet einen bestehenden Datensatz im aktuellen Fenster | |
| Öffnet einen Datensatz im Vollbild-Modus | |
| Öffnet einen Datensatz als Popup | |
| Schließt den aktuellen Datensatz | |
| Schließt den Vollbildmodus | |
| Schließt alle geöffneten Datensätze | |
| Löscht den angegebenen Datensatz | |
| Aktualisiert ein Feld in einem Datensatz | |
| Erstellt einen neuen Datensatz mit optionalem Popup | |
| Führt benutzerdefinierten JavaScript-Code aus |
💡 Tipp: Du kannst mehrere Aktionen hintereinander ausführen, indem du sie im Array kombinierst. Die Ausführung erfolgt in der Reihenfolge, in der sie im Array angegeben sind.
Fazit
Das arcCustomButton
-Widget ist ein vielseitiges Werkzeug, um Aktionen in deiner Ninox-App sichtbar und interaktiv zu machen – egal ob du einfache Links, komplexe Workflows oder optisch ansprechende Dashboards gestalten möchtest. Dank der flexiblen Gestaltungsmöglichkeiten und des leistungsstarken Aktionssystems lässt sich der Button nahtlos in bestehende Layouts und Komponenten integrieren.
💡 Pro-Tipp: In Kombination mit anderen arcWidgets – z. B. arcCustomText
oder arcCustomCard
– kannst du komplette UI-Bausteine entwickeln, die sowohl funktional als auch visuell überzeugen.