logo

eola Style Guide 2024: Button

Button

Buttons allow users to take actions, and make choices, with a single tap.

Commonly used operating buttons:

Examples

variant: primary

<StyledSection>
  <Button>Primary Button</Button>
  <Button>
    <Icon name="shield" size={24} color="white" mr={2}/>
    Primary Button
  </Button>
  <Button variant="primary" inactive>Primary Button</Button>
  <Button loading>Primary Button</Button>
  <Button success>Primary Button</Button>
</StyledSection>

variant: secondary

<StyledSection>
  <Button variant="secondary">Secondary Button</Button>
  <Button variant="secondary" inactive>Secondary Button</Button>
  <Button variant="secondary" loading>Secondary Button</Button>
  <Button variant="secondary" success>Secondary Button</Button>
</StyledSection>

variant: tertiary

<StyledSection>
  <Button variant="tertiary">Tertiary Button</Button>
  <Button variant="tertiary" inactive>Tertiary Button</Button>
</StyledSection>

variant: quaternary

<StyledSection>
  <Button variant="quaternary">Quaternary Button</Button>
  <Button variant="quaternary" inactive>Quaternary Button</Button>
</StyledSection>

variant: content

<StyledSection>
  <Button variant="content">Content</Button>
  <Button variant="content" inactive>Content</Button>
  <Button variant="content" loading>Content</Button>
  <Button variant="content" success>Content</Button>
</StyledSection>

variant: icon

<StyledSection>
  <Button variant="icon">
    <Icon name="close" color="grey" />
  </Button>
  <Button variant="icon" inactive>
    <Icon name="close" color="grey" />
  </Button>
  <Button variant="icon" loading>
    <Icon name="close" color="grey" />
  </Button>
</StyledSection>

variant: eola Primary

<StyledSection>
  <Button variant="eola-primary">Eola Primary</Button>
  <Button variant="eola-primary" inactive>Eola Primary</Button>
  <Button variant="eola-primary" loading>Eola Primary</Button>
  <Button variant="eola-primary" success>Eola Primary</Button>
</StyledSection>

variant: eola Secondary

<StyledSection>
  <Button variant="eola-primary">Eola Secondary</Button>
  <Button variant="eola-primary" inactive>Eola Secondary</Button>
  <Button variant="eola-primary" loading>Eola Secondary</Button>
  <Button variant="eola-primary" success>Eola Secondary</Button>
</StyledSection>