Skip to main content

@dialstack/sdk-dev / js/src / BaseComponentClasses

Interface: BaseComponentClasses

Defined in: sdk/js/src/types/appearance.ts:169

Base CSS class names that can be applied to component states.

These classes are applied to the component's container element, allowing integration with external CSS frameworks (Tailwind, Bootstrap, etc.)

Example​

TypeScript
// Using with Tailwind CSS
classes: {
  base: 'rounded-lg border border-gray-200',
  loading: 'animate-pulse bg-gray-100',
  error: 'border-red-500 bg-red-50',
  empty: 'text-gray-400 italic'
}

Extended by​

Properties​

base?​

TypeScript
optional base?: string;

Defined in: sdk/js/src/types/appearance.ts:174

Base class applied to the container always

Default​

TypeScript
'dialstack-component'

empty?​

TypeScript
optional empty?: string;

Defined in: sdk/js/src/types/appearance.ts:192

Class applied when the component has no data

Default​

TypeScript
'dialstack-component--empty'

error?​

TypeScript
optional error?: string;

Defined in: sdk/js/src/types/appearance.ts:186

Class applied when there's an error

Default​

TypeScript
'dialstack-component--error'

loading?​

TypeScript
optional loading?: string;

Defined in: sdk/js/src/types/appearance.ts:180

Class applied when the component is loading

Default​

TypeScript
'dialstack-component--loading'
On this page