diff --git a/src/analyzer/typescript-react-analyzer/property-analyzer/property-analyzer.ts b/src/analyzer/typescript-react-analyzer/property-analyzer/property-analyzer.ts
index ae1d5c570..2b588548e 100644
--- a/src/analyzer/typescript-react-analyzer/property-analyzer/property-analyzer.ts
+++ b/src/analyzer/typescript-react-analyzer/property-analyzer/property-analyzer.ts
@@ -212,19 +212,21 @@ function createEnumProperty(
 		label: args.symbol.name,
 		origin: 'user-provided',
 		options: enumDeclaration.members.map((enumMember, index) => {
-			const enumMemberOrdinal = enumMember.initializer
-				? parseInt(enumMember.initializer.getText(), 10)
-				: index;
+			const init = enumMember.initializer
+				? String(enumMember.initializer.getText())
+				: String(index);
+
+			const value = init.charAt(0) === '"' ? init.slice(1, -1) : init;
 
 			const name =
 				TypescriptUtils.getJsDocValueFromNode(enumMember, 'name') || enumMember.name.getText();
 
 			return {
-				contextId: String(enumMemberOrdinal),
+				contextId: init,
 				id: ctx.getEnumOptionId(enumId, name),
 				name,
-				ordinal: enumMemberOrdinal,
-				value: enumMemberOrdinal
+				ordinal: init,
+				value
 			};
 		}),
 		propertyName: args.symbol.name,
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
index cd24c6b96..65176860b 100644
--- a/src/components/button/index.tsx
+++ b/src/components/button/index.tsx
@@ -72,7 +72,6 @@ const StyledButton = styled.button`
 				background: ${Color.White};
 			`
 			: ''};
-
 	${(props: ButtonProps) =>
 		typeof props.textColor !== 'undefined'
 			? `
diff --git a/src/model/pattern-library/builtins/box.ts b/src/model/pattern-library/builtins/box.ts
index f3ac4dfef..3ad1353bd 100644
--- a/src/model/pattern-library/builtins/box.ts
+++ b/src/model/pattern-library/builtins/box.ts
@@ -113,35 +113,35 @@ export const Box = (context: BuiltInContext): BuiltInResult => {
 					id: context.options.getGloablEnumOptionId(alignId, 'flex-start'),
 					name: 'Start',
 					value: 'flex-start',
-					ordinal: 0
+					ordinal: '0'
 				}),
 				new PatternEnumPropertyOption({
 					contextId: 'flex-end',
 					id: context.options.getGloablEnumOptionId(alignId, 'flex-end'),
 					name: 'End',
 					value: 'flex-end',
-					ordinal: 1
+					ordinal: '1'
 				}),
 				new PatternEnumPropertyOption({
 					contextId: 'center',
 					id: defaultAlign,
 					name: 'Center',
 					value: 'center',
-					ordinal: 2
+					ordinal: '2'
 				}),
 				new PatternEnumPropertyOption({
 					contextId: 'stretch',
 					id: context.options.getGloablEnumOptionId(alignId, 'stretch'),
 					name: 'Stretch',
 					value: 'stretch',
-					ordinal: 3
+					ordinal: '3'
 				}),
 				new PatternEnumPropertyOption({
 					contextId: 'baseline',
 					id: context.options.getGloablEnumOptionId(alignId, 'baseline'),
 					name: 'Baseline',
 					value: 'baseline',
-					ordinal: 4
+					ordinal: '4'
 				})
 			]
 		}),
@@ -160,42 +160,42 @@ export const Box = (context: BuiltInContext): BuiltInResult => {
 					id: context.options.getGloablEnumOptionId(justifyId, 'flex-start'),
 					name: 'Start',
 					value: 'flex-start',
-					ordinal: 0
+					ordinal: '0'
 				}),
 				new PatternEnumPropertyOption({
 					contextId: 'flex-end',
 					id: context.options.getGloablEnumOptionId(justifyId, 'flex-end'),
 					name: 'End',
 					value: 'flex-end',
-					ordinal: 1
+					ordinal: '1'
 				}),
 				new PatternEnumPropertyOption({
 					contextId: 'center',
 					id: defaultJustify,
 					name: 'Center',
 					value: 'center',
-					ordinal: 2
+					ordinal: '2'
 				}),
 				new PatternEnumPropertyOption({
 					contextId: 'space-between',
 					id: context.options.getGloablEnumOptionId(justifyId, 'space-between'),
 					name: 'Space Between',
 					value: 'space-between',
-					ordinal: 3
+					ordinal: '3'
 				}),
 				new PatternEnumPropertyOption({
 					contextId: 'space-around',
 					id: context.options.getGloablEnumOptionId(justifyId, 'space-around'),
 					name: 'Space Around',
 					value: 'space-around',
-					ordinal: 4
+					ordinal: '4'
 				}),
 				new PatternEnumPropertyOption({
 					contextId: 'space-evenly',
 					id: context.options.getGloablEnumOptionId(justifyId, 'space-evenly'),
 					name: 'Space Evenly',
 					value: 'space-evenly',
-					ordinal: 5
+					ordinal: '5'
 				})
 			]
 		}),
diff --git a/src/model/pattern-library/builtins/page.ts b/src/model/pattern-library/builtins/page.ts
index 5248d715f..1a98b6654 100644
--- a/src/model/pattern-library/builtins/page.ts
+++ b/src/model/pattern-library/builtins/page.ts
@@ -23,7 +23,7 @@ export const Page = (context: BuiltInContext): BuiltInResult => {
 				contextId: language.value,
 				id: context.options.getGloablEnumOptionId(langEnumId, language.value),
 				name: language.name,
-				ordinal: index,
+				ordinal: '1',
 				value: language.value
 			})
 	);
diff --git a/src/model/pattern-property/enum-property.ts b/src/model/pattern-property/enum-property.ts
index 3d2e18975..bbe8e743a 100644
--- a/src/model/pattern-property/enum-property.ts
+++ b/src/model/pattern-property/enum-property.ts
@@ -122,16 +122,16 @@ export interface PatternEnumPropertyOptionInit {
 	contextId: string;
 	id: string;
 	name: string;
-	ordinal: number;
-	value: string | number;
+	ordinal: string;
+	value: string;
 }
 
 export class PatternEnumPropertyOption {
 	@Mobx.observable private contextId: string;
 	@Mobx.observable private id: string;
 	@Mobx.observable private name: string;
-	@Mobx.observable private ordinal: number;
-	@Mobx.observable private value: string | number;
+	@Mobx.observable private ordinal: string;
+	@Mobx.observable private value: string;
 
 	public constructor(init: PatternEnumPropertyOptionInit) {
 		this.id = init.id;
@@ -157,7 +157,7 @@ export class PatternEnumPropertyOption {
 		return this.name;
 	}
 
-	public getOrdinal(): number {
+	public getOrdinal(): string {
 		return this.ordinal;
 	}
 
diff --git a/src/model/types.ts b/src/model/types.ts
index 89e9b36be..b0077ee4c 100644
--- a/src/model/types.ts
+++ b/src/model/types.ts
@@ -198,8 +198,8 @@ export interface SerializedEnumOption {
 	contextId: string;
 	id: string;
 	name: string;
-	ordinal: number;
-	value: string | number;
+	ordinal: string;
+	value: string;
 }
 
 export interface SerializedPatternNumberArrayProperty extends SerializedPropertyBase {