Agnostic

Buttons

Everyone knows buttons are the life of the party 🕺

Examples

Groups

Usage

astro logo

React, Vue, and Svelte examples on a single playground page 🚀 💥

codesandbox logo View in CodeSandbox Stackblitz logo View in Stackblitz

react logoReact

View source
import 'agnostic-react/dist/common.min.css';
import 'agnostic-react/dist/esm/index.css';
import { Button, ButtonGroup } from 'agnostic-react';
  
const onClickStub = (e) => console.log('onClickStub called...', e)

export const YourComponent = () => (
  <>
    <Button>Go</Button>
    <Button isRounded>Go</Button>
    <Button isBordered>Go</Button>
    <Button isBordered isRounded>Go</Button>
    <Button mode="primary">Go</Button>
    <Button mode="primary" isRounded>Go</Button>
    <Button mode="secondary">Go</Button>
    <Button isDisabled>Go</Button>
    <Button size="small">Go</Button>
    <Button size="large">Go</Button>
    <Button isBlock>Go</Button>
    <ButtonGroup ariaLabel="Button group">
      <Button isGrouped onClick={onClickStub}>One</Button>
      <Button isGrouped onClick={onClickStub}>Two</Button>
      <Button isGrouped onClick={onClickStub}>Three</Button>
    </ButtonGroup>
  </>
);

React: component source, storybook tests

Vue 3 logoVue 3

View source
<template>
  <div class="mbs16 mbe16">
    <Button>Go</Button>
    <Button isRounded>Go</Button>
    >Go</Button>
    <Button isBordered>Go</Button>
    <Button
      isBordered
      isRounded
    >Go</Button>
    <Button mode="primary">Go</Button>
    <Button
      mode="primary"
      isRounded
    >Go</Button>
    <Button mode="secondary">Go</Button>
  </div>
  <div class="mbe16">
    <Button size="small">Smaller</Button>
    <Button size="large">Larger</Button>
    <Button isDisabled>Disabled</Button>
  </div>
  <div class="mbe16">
    <Button isBlock>Go</Button>
  </div>
  <div class="mbe16">
    <ButtonGroup ariaLabel="Button group">
      <Button isGrouped isBordered>One</Button>
      <Button isGrouped isBordered>Two</Button>
      <Button isGrouped isBordered>Three</Button>
    </ButtonGroup>
  </div>
  <div class="mbe16">
    <ButtonGroup ariaLabel="Button group">
      <Button isGrouped mode="primary">One</Button>
      <Button isGrouped mode="primary">Two</Button>
      <Button isGrouped mode="primary">Three</Button>
    </ButtonGroup>
  </div>
</template>
<script setup>
// Import AgnosticUI global common & component CSS
import "agnostic-vue/dist/common.min.css";
import "agnostic-vue/dist/index.css";
import { Button, ButtonGroup } from "agnostic-vue";
</script>

Vue 3: component source, storybook tests

Svelte logoSvelte

View source
<script>
  import 'agnostic-svelte/css/common.min.css';
  import { Button, ButtonGroup } from "agnostic-svelte";
  const onClickStub = (e) => console.log('onClickStub called...', e)
</script>
<div class="mbe16">
  <Button on:click={onClickStub}>Default</Button>
  <Button isCircle>99</Button>
  <Button mode="primary">Go</Button>
  <Button mode="primary" size="large">Go</Button>
  <Button mode="primary" isBordered>Go</Button>
  <Button mode="primary" isBlock>Go</Button>
  <Button mode="primary" isBlank>Go</Button>
  <Button mode="primary" isLink>Go</Button>
  <Button mode="primary" isDisabled>Go</Button>
  <Button mode="primary" isRounded>Go</Button>
  <Button isSkinned={false}>Go</Button>
  <button class="tab-button">
    <Button type="faux" mode="primary">div</Button>
  </button>
  <div class="mbe24" />
  <ButtonGroup ariaLabel="Appropriate label for your button group">
    <Button isGrouped isBordered mode="primary" on:click={onClickStub}>One</Button>
    <Button isGrouped isBordered mode="primary" on:click={onClickStub}>Two</Button>
    <Button isGrouped isBordered mode="primary" on:click={onClickStub}>Three</Button>
  </ButtonGroup>
</div>

Svelte: component source, storybook tests

Angular logoAngular (Experimental)

View source

In your Angular configuration (likely angular.json) ensure you're including the common AgnosticUI styles:

"styles": ["agnostic-angular/common.min.css"],

Add AgnosticUI's AgModule module:



 





 





import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgModule } from 'agnostic-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AgModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Now you can use in your components:

import { Component } from '@angular/core';

@Component({
  selector: 'your-component',
  template: `<div>
  <section>
    <ag-button [isBordered]="true">Go</ag-button>
    <ag-button [isBlank]="true">Go</ag-button>
    <ag-button [isBlock]="true">Go</ag-button>
    <ag-button [isRounded]="true">Go</ag-button>
    <ag-button [isBordered]="true"
               [isRounded]="true">Go</ag-button>
    <ag-button mode="primary">Go</ag-button>
    <ag-button mode="primary"
               [isBordered]="true">Go</ag-button>
    <ag-button mode="secondary">Go</ag-button>
    <ag-button mode="secondary"
               [isBordered]="true">Go</ag-button>
  </section>
  <section>
    <h3>Button Groups</h3>
    <ag-button-group ariaLabel="Button group">
      <div class="btn-first-wrap">
        <ag-button mode="primary"
                   [isBordered]="true">Button 1</ag-button>
      </div>
      <ag-button mode="primary"
                 [isBordered]="true">Button 2</ag-button>
      <ag-button mode="primary"
                 [isBordered]="true">Button 3</ag-button>
      <div class="btn-last-wrap">
        <ag-button mode="primary"
                   [isBordered]="true">Button 4</ag-button>
      </div>
    </ag-button-group>
  </section>
</div>`,
})
export class YourComponent { //... }

Angular: component source, storybook tests

Storybook

You can run the framework Storybooks and see live examples for React, Vue 3, Svelte, Astro, and Angular (experimental). The following will set up Storybook and run locally:

How to run Storybook
git clone git@github.com:AgnosticUI/agnosticui.git
cd agnosticui/<PACKAGE_NAME> && npm i # e.g. cd agnosticui/agnostic-react && npm i
npm run storybook

See Running Storybook.