ImmoSystem24 DS

Aktionen

Hauptaktion dunkles Navy (default = product). Blau nur für Links, Fokus, Diagramme und ausgewählte Kontrollen.

Button
shadcn/ui · button
Hover neutral, Tastaturfokus 2-px-Outline (kein Ring bei Mausklick), Gedrückt inset-Schatten, Disabled ohne Schatten.
Primär (Navy)
Akzent (optional)
Sekundär
Outline / Ghost
Destruktiv
Größen

Import

import { Button } from "@/components/ui/button"

Verwendung

  • default ist die Navy-Hauptaktion; product bleibt kompatibler Alias.
  • accent (Blau) nur optional für hervorgehobene Einzelfälle.
  • Pro Bereich höchstens eine Primäraktion.
  • Sekundär für Nebenaktionen, Ghost in dichten Leisten.
  • Destruktiv nur mit Bestätigung (Alert Dialog).
  • loading setzt disabled + aria-busy.
Icon-Button
shadcn/ui · button (size=icon)
Varianten

Import

<Button size="icon" aria-label="…">

Verwendung

  • Immer aria-label und Tooltip.
  • 40 × 40 px Standard, 48 px für Pagination/Touch.
Button Group / Split-Action
shadcn/ui · button-group
Gruppe
Split-Action

Import

import { ButtonGroup, ButtonGroupSeparator } from "@/components/ui/button-group"

Verwendung

  • Gemeinsamer 40-px-Rahmen, Radien nur außen.
  • Split-Action: Hauptaktion + Menü mit Alternativen.
Link
shadcn/ui · button (variant=link)
Zustände
Zu den Grundlagenshadcn/ui

Import

<Button variant="link" asChild><Link to="…" /></Button>

Verwendung

  • Navigation = Link, Aktion = Button.
  • Externe Links mit Icon kennzeichnen.
Quick-Action
Komposition

Import

<Button variant="quick" size="tile">

Basis: button variant=quick size=tile

Verwendung

  • Gemessene Referenz 240 × 92 px, Padding 16, Gap 8, Radius 12.
  • Label 14/22 · 600.
  • Gap 8 px wie Dashboard, feine Kontur ohne Schatten.
Made by Loui Augst