Skip to content

_ButtonPrimaryOutline ​

Composition primitive, consumed by leaf keys via composes.

Source: client/lib/theme/vueda-tailwind/controls/index.js

The primary outline recipe pairs a DPR-aware --primary hairline with readable --primary-text over --background (dark mode keeps bg-input/30). Hover and active add a primary tint (/10 then /15) while the label retains its contrast-adjusted blue. The inset hairline matches filled-button dimensions.

SlotDefault classesDescription
root3 classesThe primary outline recipe pairs a DPR-aware --primary hairline with readable --primary-text over --background (dark mode keeps bg-input/30). Hover and active add a primary tint (/10 then /15) while the label retains its contrast-adjusted blue. The inset hairline matches filled-button dimensions.

root ​

The primary outline recipe pairs a DPR-aware --primary hairline with readable --primary-text over --background (dark mode keeps bg-input/30). Hover and active add a primary tint (/10 then /15) while the label retains its contrast-adjusted blue. The inset hairline matches filled-button dimensions.

Default classes:

text
hairline hairline-primary bg-background text-primary-text dark:bg-input/30
hover:bg-primary/10 active:bg-primary/15
disabled:!shadow-none disabled:bg-transparent disabled:text-disabled-foreground

Source: client/lib/theme/vueda-tailwind/controls/_ButtonPrimitives.theme.js:171