Buttons
Button variants, disabled and loading states, anchor mode, and social login buttons.
Variants
The four button variants. Buttons stretch to the full width of their container.
import { Button } from '@mediayard/agoratopia-ui/components/button';
<Button>Default</Button>
<Button variant="primary">Primary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button> States
Disabled buttons and the anchor mode, which renders an <a> element when an href is passed.
<Button disabled>Disabled</Button>
<Button href={resolve('/')} variant="outline">Anchor button</Button> Loading
Loading buttons show a spinner, become disabled, and keep their variant colors. Pass loading_text to replace the label while loading.
<Button loading>Loading</Button>
<Button variant="primary" loading loading_text="Saving…">Save</Button>
<Button variant="outline" loading={saving} onclick={save}>Click to load</Button> Social buttons
Buttons with a provider icon, used for social login flows. They accept all Button props, including disabled and loading.
import { SocialButton } from '@mediayard/agoratopia-ui/components/button';
<SocialButton provider="apple" variant="outline">Continue with Apple</SocialButton>
<SocialButton provider="google" variant="outline">Continue with Google</SocialButton>
<SocialButton provider="facebook" variant="outline">Continue with Facebook</SocialButton>
<SocialButton provider="google" variant="outline" disabled>Continue with Google</SocialButton>
<SocialButton provider="apple" variant="outline" loading>Continue with Apple</SocialButton>
<SocialButton provider="facebook" variant="outline" loading loading_text="Signing in…">Continue with Facebook</SocialButton>