Browse all of Kata
Components
One page per core component: a live specimen in both themes, anatomy, every state, and the code.
- ButtonThe thing you tap to do something. Three variants — primary, secondary, link — and no disabled state.
- CardA white block on the tinted page. It groups things by fill alone — no border, no shadow.
- RowThe generic list row: an optional leading slot, a title, an optional subtitle, a trailing slot, and a chevron when it goes somewhere.
- HeroThe full-bleed loud block: eyebrow, statement, meta, and one red action, on the surface that contrasts most with the page.
- BadgeA status pill: a fill and a short label. It states a fact and never takes a tap.
- Tag chipA pill you pick. Interactive chips filter or choose; readonly chips label a session's tags.
- Segmented controlA connected track of equal segments that switches a view in place. The chosen segment is red.
- CheckboxA decision about a thing already on screen: send this note, include this student.
- Input and FieldInput is the typed field. Field is the label, helper and error around any control — an input, a select trigger, a row of chips. Every form is made of the two.
- Search fieldAn Input with a magnifier in front and a clear button behind once there is a query.
- Select triggerThe control that opens a sheet. It looks like an input because it is one — the same fill, edge, radius and height — with a chevron and a value in place of a cursor.
- Empty stateWhat a screen or section shows when there is genuinely nothing in it: what goes here, why, and one way to start.
- AvatarA person's photo in a circle, or their initials when there is no photo.
- Belt dot and rank pickerBeltDot draws a rank as a small ringed circle. RankPicker lists a dojo's own ladder as rows to choose from; RankPickerSheet puts that list in a sheet.
- ToastA short confirmation of something the person just did, near the bottom of the screen, gone by itself after five seconds.
- Bottom sheetA surface that slides up over the screen for a short, focused job — usually choosing one thing — and goes away when it is done.