컴포넌트

공식 심볼과 LafLabs 워드마크를 함께 표시합니다.

현재 화면에서 동작을 실행합니다.

Button과 같은 모양을 쓰되 native anchor로 다른 주소에 이동합니다.

관련 동작과 보조 요소를 하나의 연결된 틀로 묶습니다.

FieldGroup과 FieldSet으로 레이블, 입력, 설명, 오류를 완전한 폼 구역으로 구성합니다.

입력 요소의 목적을 짧게 설명합니다.

한 줄 값을 입력받는 native input입니다.

여러 줄의 긴 텍스트를 입력받습니다.

브라우저 기본 선택 동작을 유지하는 select입니다.

긴 선택 목록을 키보드와 포인터로 탐색합니다.

검색 가능한 긴 목록에서 하나의 값을 고릅니다.

입력과 단위, 접두어, 짧은 동작을 하나의 컨트롤로 묶습니다.

둘 이상의 짧은 선택지 중 하나를 고릅니다.

서로 독립적인 선택을 켜고 끕니다.

한 그룹에서 하나의 값만 고릅니다.

즉시 적용되는 하나의 설정을 켜고 끕니다.

텍스트와 화살표로 다음 목적지를 알립니다.

한 트리거에서 관련 명령과 설정을 엽니다.

현재 페이지가 정보 구조에서 어디에 있는지 보여줍니다.

연결된 레일에서 컬렉션의 이전, 다음, 특정 페이지로 이동합니다.

같은 맥락의 패널을 한 번에 하나씩 전환합니다.

긴 설명을 제목 단위로 펼치고 접습니다.

짧은 보조 설명을 hover와 focus에 제공합니다.

현재 맥락 옆에 짧은 정보나 조작을 펼칩니다.

페이지 맥락을 유지한 채 가장자리에서 넓은 작업 공간을 엽니다.

현재 흐름 위에서 집중이 필요한 짧은 작업을 엽니다.

되돌리기 어려운 행동 전에 명시적인 결정을 받습니다.

측정 가능한 작업의 진행률이나 연결 중 상태를 보여줍니다.

고정된 사각 테두리를 따라 열린 구간이 흐르며 완료 시점을 알 수 없는 진행을 알립니다.

현재 작업을 막지 않고 짧은 결과를 전역 큐로 알립니다.

본문 흐름 안에 계속 남아 있는 상태와 다음 행동을 설명합니다.

작은 색상 사각형과 짧은 텍스트로 실제 개체 상태를 나타냅니다.

콘텐츠 구조가 불러와지는 동안 자리를 유지합니다.

표시할 내용이 없을 때 이유와 다음 행동을 안내합니다.

열과 행으로 비교해야 하는 정보를 native table로 보여줍니다.

정렬과 빈 상태가 필요한 구조화 데이터를 보여줍니다.

언어 이름과 복사 동작을 갖춘 코드 읽기 영역입니다.

미디어, 본문, 메타데이터와 동작을 하나의 행으로 구성합니다.

콘텐츠 사이의 시각적 또는 의미적 경계를 만듭니다.

관련된 정보와 동작을 하나의 명확한 경계 안에 구성합니다.