Skip to main content

- Odds Lab
- Strategy
- Play

Overview

Introduction
Principles
Proposing a pattern

Foundations

Color
Typography
Layout and spacing
Shape and elevation
Motion
Icons and emoji
Writing style
Accessibility
Theme playground

Components

General

Button
Chip
ChoiceGroup
Badge
TextLink and Term
GameLink and CallName
StepNumber

Layout

Page and PageHeader
Panel and Stat
StepPanel
Field and EmptyState
Layout

Navigation

Header
MobileNav
Footer
PageTabs
NextStep

Data entry

RollInput
RollButton
NativeSelect
Input
Label
Switch
ToggleGroup
Slider
Select(deprecated)
VariantSelector
DiceSettings
Settings
SettingsMenu
HouseRuleSettings

Data display

Table
Card(deprecated)
Tabs(deprecated)
StrengthTag

Dice

Die
DieFace
DiceMishap
DieSlot
Hand
DiceGroup

Table

TableFelt
Seat
SeatRing
Standings
TableOrder
DiceCup

Odds

OddsDecision
ProbabilityBar
RollsPct
OutcomeGrid
Branches
Disclosure, MathSteps, Questions
OddsLabLink
BarkOdds
BarkHands
BarkSizes, BarkWhy, BarkAssumptions
UnheldCalls
BarkGuide

Feedback

Alert
Popover
Tooltip
Dialog
Sheet

Patterns

Site

TableFault
RoundStory

Play

Play
Transport and SpeedPicker
CallPlacard
Setup
HintCard

Learn

Tutorial

Games

GameCard
StrengthChart, SampleRolls, PairedGames

Odds Lab

KeepAdvisor
SituationCard
SituationWhy
GameOdds
EveryPossibility
RollGrid
OutcomeMap
RollBuilder
QueryBuilder

Strategy

HammerDecision
RefusalDecision
SecondCallPredictor
SecondCallDistribution

Design system
RollButton

Components · Data entry

RollButton

Approved

The one Roll button: dice icon and “Roll”.

Source: src/components/Dice/RollButton.jsx
Exports: RollButton

Examples

Learn the game

Learn
Rules
Games
Glossary

Get better

Odds Lab
Strategy

Play

Play

About

Design system

This site built and designed by Jesse Bilsten.