Hatch Logo
/

<LegacyButton> Component

Primary



Share
Code Editor


 <LegacyButton variant="primary" text="Hello world" />

Secondary



Share
Code Editor


 <LegacyButton variant="secondary" text="Hello world" />

Colors

 themeColor?:
    | 'blue'
    | 'white'
    | 'rose'
    | 'teal'
    | 'navy'
    | 'alt-blue'
    | 'reserved';
Share
Code Editor


<Columns align={{ x: "start" }} count={4}>

<Stack>

 <LegacyButton variant="primary" text="Hello world" themeColor="navy" />

 <LegacyButton variant="secondary" text="Hello world" themeColor="navy" />

</Stack>

<Stack>

 <LegacyButton variant="primary" text="Hello world" themeColor="blue" />

 <LegacyButton variant="secondary" text="Hello world" themeColor="blue" />

</Stack>

<Stack>

 <LegacyButton variant="primary" text="Hello world" themeColor="white" />

  <div style={{ background: 'var(--hdc-navy)', padding: 24 }}>

 <LegacyButton variant="secondary" text="Hello world" themeColor="white" />

  </div>

</Stack>

</Columns>

Layout considerations

By default buttons will span the full width of their container

Share
Code Editor


<Stack >

 <LegacyButton variant="primary" text="Hello world" />

 <LegacyButton variant="secondary" text="Hello world" />

</Stack>

It's easy to use CSS grid layout, or a component's abstraction to align

Share
Code Editor


<Columns align={{ x: 'start' }}>

 <LegacyButton variant="primary" text="Hello world" />

 <LegacyButton variant="secondary" text="Hello world" />

</Columns>