CssClass
CSS classes used by the obsidian-dev-utils library.
Import:
import type { CssClass } from 'obsidian-dev-utils/obsidian/css-class';Signature:
export enum CssClassMembers:
| Member | Value | Description |
|---|---|---|
AlertModal | 'alert-modal' | A CSS class for the alert modal. |
CancelButton | 'cancel-button' | A CSS class for the cancel button. |
CheckboxComponent | 'checkbox-component' | A CSS class for the checkbox component. |
ClickableIcon | 'clickable-icon' | Obsidian’s class for a clickable icon button, giving it the hover background and icon-color treatment. |
Code | 'code' | Obsidian’s class for an inline code element (used by appendCodeBlock). |
CodeHighlighterComponent | 'code-highlighter-component' | A CSS class for the code highlighter component. |
ConfirmModal | 'confirm-modal' | A CSS class for the confirm modal. |
DateComponent | 'date-component' | A CSS class for the date component. |
DateTimeComponent | 'datetime-component' | A CSS class for the date and time component. |
EmailComponent | 'email-component' | A CSS class for the email component. |
FileComponent | 'file-component' | A CSS class for the file component. |
IsActive | 'is-active' | Obsidian’s class for a control that is currently ON, reused so a pressed command button matches the app’s own toggled controls. |
IsPlaceholder | 'is-placeholder' | A CSS class for the placeholder. |
LibraryName | 'obsidian-dev-utils' | A CSS class for the library name. |
MarkdownRendered | 'markdown-rendered' | Obsidian’s class marking rendered-markdown content (used by appendCodeBlock). |
MinimizableModal | 'minimizable-modal' | A CSS class for the minimizable modal. |
MinimizeButton | 'minimize-button' | A CSS class for the minimize button of the minimizable modal. |
MinimizedModalBar | 'minimized-modal-bar' | A CSS class for the minimized bar of the minimizable modal. |
MinimizedModalBarAttention | 'minimized-modal-bar-attention' | A CSS class for the one-shot attention flash of the minimized bar, played when the user attempts a blocked action (a keystroke, right-click, or opening another modal) while the modal is minimized. |
MinimizedModalBarTitle | 'minimized-modal-bar-title' | A CSS class for the title of the minimized bar of the minimizable modal. |
ModalCommand | 'modal-command' | A CSS class for one button in a modal’s command strip. |
ModalCommandControl | 'modal-command-control' | A CSS class for a control injected into an instruction’s purpose text — a checkbox, a dropdown. Obsidian’s own instruction bar never contains one, so nothing upstream separates it from the label it belongs to. |
ModalCommandHotkey | 'modal-command-hotkey' | A CSS class for the hotkey hint inside a modal command button. |
ModalCommands | 'modal-commands' | A CSS class for the strip of commands a modal renders along its bottom edge. |
ModalHeaderButton | 'modal-header-button' | Obsidian’s class for a modal header button (e.g. the modal close button), reused to match the native modal close button’s box and hover. |
MonthComponent | 'month-component' | A CSS class for the month component. |
MultipleDropdownComponent | 'multiple-dropdown-component' | A CSS class for the multiple dropdown component. |
MultipleEmailComponent | 'multiple-email-component' | A CSS class for the multiple email component. |
MultipleFileComponent | 'multiple-file-component' | A CSS class for the multiple file component. |
MultipleTextComponent | 'multiple-text-component' | A CSS class for the multiple text component. |
NumberComponent | 'number-component' | A CSS class for the number component. |
OkButton | 'ok-button' | A CSS class for the ok button. |
OverlayValidator | 'overlay-validator' | A CSS class for the overlay validator. |
PasswordComponent | 'password-component' | A CSS class for the password component. |
PluginNoticeCloseButton | 'plugin-notice-close-button' | A CSS class for the close button of a notice that requires close confirmation. |
PluginNoticeContent | 'plugin-notice-content' | A CSS class for the container wrapping a notice’s content, used to keep the notice open when an interactive element inside it is clicked. |
PluginNoticeName | 'plugin-notice-name' | A CSS class for the plugin name shown as the prefix of a notice. |
PluginNoticeRequiresExplicitClose | 'plugin-notice-requires-explicit-close' | A CSS class applied to the notice element of a notice that requires an explicit close, used to make its whole area non-dismissible. |
PluginSettingsTab | 'plugin-settings-tab' | A CSS class for the plugin settings tab. |
PluginSuggestionBanner | 'plugin-suggestion-banner' | A CSS class for the banner a plugin-suggestion renders into a settings tab. |
Popover | 'popover' | A CSS class for the popover. |
PromptInstruction | 'prompt-instruction' | Obsidian’s class for one row of its modal instruction bar, reused so a self-created bar inherits the app’s own instruction styling. |
PromptInstructionCommand | 'prompt-instruction-command' | Obsidian’s class for the key-hint half of one instruction row. It is the only thing carrying that hint’s bold weight and the margin-inline-end that separates it from the purpose text, so a self-created bar that omits it renders alt 1Keep the old title welded together. Reused rather than re-implemented: the app’s rule for it is unscoped, so it reaches a plain Modal too, and sharing the class keeps the self-created bar and setInstructions from ever drifting apart. |
PromptInstructions | 'prompt-instructions' | Obsidian’s class for its modal instruction bar, reused so a self-created bar inherits the app’s own instruction styling. |
PromptModal | 'prompt-modal' | A CSS class for the prompt modal. |
RestoreButton | 'restore-button' | A CSS class for the restore button of the minimized modal bar. |
SelectItemModal | 'select-item-modal' | A CSS class for the select item modal. |
SelectOptionModal | 'select-option-modal' | A CSS class for the select option modal. |
SettingComponentWrapper | 'setting-component-wrapper' | A CSS class for the setting component wrapper. |
TelephoneComponent | 'telephone-component' | A CSS class for the telephone component. |
TextBox | 'text-box' | A CSS class for the text box. |
TimeComponent | 'time-component' | A CSS class for the time component. |
Tooltip | 'tooltip' | A CSS class for the tooltip. |
TooltipArrow | 'tooltip-arrow' | A CSS class for the tooltip arrow. |
TooltipValidator | 'tooltip-validator' | A CSS class for the tooltip validator. |
TriStateCheckboxComponent | 'tri-state-checkbox-component' | A CSS class for the tri-state checkbox component. |
TypedDropdownComponent | 'typed-dropdown-component' | A CSS class for the typed dropdown component. |
TypedMultipleDropdownComponent | 'typed-multiple-dropdown-component' | A CSS class for the typed multiple dropdown component. |
Untouched | 'untouched' | A CSS class for an input the user has not interacted with yet, used to defer the invalid styling until the input is touched. |
UrlComponent | 'url-component' | A CSS class for the url component. |
WeekComponent | 'week-component' | A CSS class for the week component. |
Links to this page: