/
- Compound
- Accordion
- Content
- BenefitsSection
- Billboard
- ImageBackgroundCallToAction
- Primitives
- Button
- LegacyButton
- Color
- Columns
- GridContainer
- Popover
- Stack
- StyledLink
- Typography
- Hero
- CenteredHero
- GifBackgroundHero
- SimpleHero
- SplitHero
- StandardHero
- VideoBackgroundHero
- Dialog
- EmailSignupDialog
- Promo
- OfferBox
- SimpleBanner
- Merchandise
- ProductCard
- Shop
- ShopSection
- ShopSectionNew
- App Portrayal
- SleepRoutineTabsSection
- Interactions
- Toast
- Docs
- Working with DatoCMS
- Magic Link Authentication Flow
- Comprehensive Next.js Authentication Flow
<Button> Component
Primary
Code Editor
<Button intent="primary" text="Hello world" />
Secondary
Code Editor
<Button intent="secondary" text="Hello world" />
Size
Code Editor
<Columns align={{ x: "start" }} count={2}><Button intent="primary" text="Large Button" /><Button intent="primary" text="Medium Button" size="medium" /></Columns>
Theming
Code Editor
<Columns align={{ x: "start" }} count={4}><div style={{ display: 'grid', gap: 8, padding: 24 }}><Button intent="primary" text="Hello world" /><Button intent="secondary" text="Hello world" /><Button intent="tertiary" text="Hello world" /></div><div data-hatch-theme="dark" style={{ display: 'grid', gap: 8, background: 'var(--hdc-navy-1000)', padding: 24 }}><Button intent="primary" text="Hello world" /><Button intent="secondary" text="Hello world" /><Button intent="tertiary" text="Hello world" /></div><div style={{ display: 'grid', gap: 8, background: 'var(--hdc-neutral-300)', padding: 24 }}><Button intent="primary" text="Hello world" /><Button intent="secondary" text="Hello world" /><Button intent="tertiary" text="Hello world" /></div></Columns>
Layout considerations
By default buttons will span the full width of their container
Code Editor
<Stack ><Button intent="primary" text="Hello world" /><Button intent="secondary" text="Hello world" /></Stack>
It's easy to use CSS grid layout, or a component's abstraction to align
Code Editor
<Columns align={{ x: 'start' }}><Button intent="primary" text="Hello world" /><Button intent="secondary" text="Hello world" /></Columns>