Prev
Next
Back
각 컴포넌트에는 반응형 정책에 따른 Text Size를 적용합니다.
Height 값에 따라 Basic, Small Size로 구분합니다.
Solid, Line 타입을 적절히 활용해, 여러 개의 Badge 컴포넌트를 조합할 수 있습니다.
Height 30px
Padding 15px
Text Color 는 Fixed Text Color / White 또는 Grayscale / black을 적용합니다.
Solid Color에 따라 Primary, Point, Secondary, Disabled, Tag 등의 State로 구분됩니다.
한 컨텐츠에서 1개의 State를 사용하는 것이 원칙이지만, 필요한 경우 컨텐츠의 구분을 위해 Disabled를 포함한 여러 State와 Type의 Badge를 동시에 조합해 활용할 수 있습니다.
제품에서 보여지는 일관적인 디자인 인터페이스를 위해, 동일한 Type에서 서로 다른 State의 조합은, Disabled를 포함해 3개까지로 제한합니다.
Text Color는 각 State와 동일한 색상을 적용합니다.
색상에 따라 Primary, Point, Secondary, Disabled의 State로 구분됩니다. Line Type에선 색상 및 위계 중복으로 'Tag' State를 활용하지 않습니다. 기타 조합 형태는 Solid와 동일합니다.
Height 26px
Padding 8px
Text Color 는 Fixed Text Color / White 또는 Grayscale / black을 적용합니다.
Solid Color에 따라 Primary, Point, Secondary, Disabled, Tag 등의 State로 구분됩니다.
기타 조합 형태는 Basic / Solid와 동일합니다.
Text Color는 각 State와 동일한 색상을 적용합니다.
색상에 따라 Primary, Point, Secondary, Disabled의 State로 구분됩니다. Line Type에선 색상 및 위계 중복으로 'Tag' State를 활용하지 않습니다. 기타 조합 형태는 Basic / Solid와 동일합니다.
