{
    "componentChunkName": "component---src-templates-doc-template-js",
    "path": "/tr/docs/button",
    "result": {"data":{"current":{"fields":{"page":{"path":"/docs/button","type":"docs","lang":"en","layout":"docs","versions":[{"lang":"en","title":"Buttons","markdown":"\nYou can use buttons created in different sizes, types and colors.\n\n## Main\n\n<div class=\"gra-doc-s-wrapper\">\n  <button class=\"gra-btn\">button</button>\n  <button class=\"gra-btn gra-btn-outline\">outlined</button>\n  <button class=\"gra-btn gra-btn-clear\">clear</button>\n  <button class=\"gra-btn\" disabled>disabled</button>\n</div>\n\n```html\n<button class=\"gra-btn\">button</button>\n<button class=\"gra-btn gra-btn-outline\">outlined</button>\n<button class=\"gra-btn gra-btn-clear\">clear</button>\n<button class=\"gra-btn\" disabled>disabled</button>\n```\n\n## Sizes\n\n<div class=\"gra-doc-s-wrapper\">\n  <button class=\"gra-btn gra-btn-small\">small</button>\n  <button class=\"gra-btn\">normal</button>\n  <button class=\"gra-btn gra-btn-large\">large</button>\n  <button class=\"gra-btn gra-btn-full-width\">full-width</button>\n</div>\n\n```html\n<button class=\"gra-btn gra-btn-small\">small</button>\n<button class=\"gra-btn\">normal</button>\n<button class=\"gra-btn gra-btn-large\">large</button>\n<button class=\"gra-btn gra-btn-full-width\">full-width</button>\n```\n\n## Colors & Types\n\n<div class=\"gra-doc-s-wrapper\">\n  <div>\n    <button class=\"gra-btn gra-btn-blue\">blue</button>\n    <button class=\"gra-btn gra-btn-blue gra-btn-outline\">blue</button>\n    <button class=\"gra-btn gra-btn-blue gra-btn-clear\">blue</button>\n    <button class=\"gra-btn gra-btn-blue\" disabled>blue</button>\n  </div>\n  <div>\n    <button class=\"gra-btn gra-btn-yellow\">yellow</button>\n    <button class=\"gra-btn gra-btn-yellow gra-btn-outline\">yellow</button>\n    <button class=\"gra-btn gra-btn-yellow gra-btn-clear\">yellow</button>\n    <button class=\"gra-btn gra-btn-yellow\" disabled>yellow</button>\n  </div>\n  <div>\n    <button class=\"gra-btn gra-btn-green\">green</button>\n    <button class=\"gra-btn gra-btn-green gra-btn-outline\">green</button>\n    <button class=\"gra-btn gra-btn-green gra-btn-clear\">green</button>\n    <button class=\"gra-btn gra-btn-green\" disabled>green</button>\n  </div>\n  <div>\n    <button class=\"gra-btn gra-btn-red\">red</button>\n    <button class=\"gra-btn gra-btn-red gra-btn-outline\">red</button>\n    <button class=\"gra-btn gra-btn-red gra-btn-clear\">red</button>\n    <button class=\"gra-btn gra-btn-red\" disabled>red</button>\n  </div>\n</div>\n\n```html\n<div>\n  <button class=\"gra-btn gra-btn-blue\">blue</button>\n  <button class=\"gra-btn gra-btn-blue gra-btn-outline\">blue</button>\n  <button class=\"gra-btn gra-btn-blue gra-btn-clear\">blue</button>\n  <button class=\"gra-btn gra-btn-blue\" disabled>blue</button>\n</div>\n<div>\n  <button class=\"gra-btn gra-btn-yellow\">yellow</button>\n  <button class=\"gra-btn gra-btn-yellow gra-btn-outline\">yellow</button>\n  <button class=\"gra-btn gra-btn-yellow gra-btn-clear\">yellow</button>\n  <button class=\"gra-btn gra-btn-yellow\" disabled>yellow</button>\n</div>\n<div>\n  <button class=\"gra-btn gra-btn-green\">green</button>\n  <button class=\"gra-btn gra-btn-green gra-btn-outline\">green</button>\n  <button class=\"gra-btn gra-btn-green gra-btn-clear\">green</button>\n  <button class=\"gra-btn gra-btn-green\" disabled>green</button>\n</div>\n<div>\n  <button class=\"gra-btn gra-btn-red\">red</button>\n  <button class=\"gra-btn gra-btn-red gra-btn-outline\">red</button>\n  <button class=\"gra-btn gra-btn-red gra-btn-clear\">red</button>\n  <button class=\"gra-btn gra-btn-red\" disabled>red</button>\n</div>\n```\n\n## Other Types\n\n<div class=\"gra-doc-s-wrapper\">\n\n[Link](# 'Link Button')\n<input class=\"gra-btn\" type=\"button\" value=\"Input\" />\n\n</div>\n\n```html\n<a class=\"gra-btn\" href=\"#\" type=\"button\">Link</a>\n<input class=\"gra-btn\" type=\"button\" value=\"Input\" />\n```\n","mdtype":"MDHTML","section":"buttons"},{"lang":"tr","title":"Butonlar","markdown":"\nFarklı boyutlarda, tiplerde ve renklerde oluşturulmuş butonları kullanabilirsiniz.\n\n## Temel\n\n<div class=\"gra-doc-s-wrapper\">\n  <button class=\"gra-btn\">buton</button>\n  <button class=\"gra-btn gra-btn-outline\">dış kenarlı</button>\n  <button class=\"gra-btn gra-btn-clear\">temiz</button>\n  <button class=\"gra-btn\" disabled>devre dışı</button>\n</div>\n\n```html\n<button class=\"gra-btn\">buton</button>\n<button class=\"gra-btn gra-btn-outline\">dış kenarlı</button>\n<button class=\"gra-btn gra-btn-clear\">temiz</button>\n<button class=\"gra-btn\" disabled>devre dışı</button>\n```\n\n## Boyutlar\n\n<div class=\"gra-doc-s-wrapper\">\n  <button class=\"gra-btn gra-btn-small\">küçük</button>\n  <button class=\"gra-btn\">normal</button>\n  <button class=\"gra-btn gra-btn-large\">büyük</button>\n  <button class=\"gra-btn gra-btn-full-width\">tam genişlik</button>\n</div>\n\n```html\n<button class=\"gra-btn gra-btn-small\">küçük</button>\n<button class=\"gra-btn\">normal</button>\n<button class=\"gra-btn gra-btn-large\">büyük</button>\n<button class=\"gra-btn gra-btn-full-width\">tam genişlik</button>\n```\n\n## Renkler & Tipler\n\n<div class=\"gra-doc-s-wrapper\">\n  <div>\n    <button class=\"gra-btn gra-btn-blue\">mavi</button>\n    <button class=\"gra-btn gra-btn-blue gra-btn-outline\">mavi</button>\n    <button class=\"gra-btn gra-btn-blue gra-btn-clear\">mavi</button>\n    <button class=\"gra-btn gra-btn-blue\" disabled>mavi</button>\n  </div>\n  <div>\n    <button class=\"gra-btn gra-btn-yellow\">sarı</button>\n    <button class=\"gra-btn gra-btn-yellow gra-btn-outline\">sarı</button>\n    <button class=\"gra-btn gra-btn-yellow gra-btn-clear\">sarı</button>\n    <button class=\"gra-btn gra-btn-yellow\" disabled>sarı</button>\n  </div>\n  <div>\n    <button class=\"gra-btn gra-btn-green\">yeşil</button>\n    <button class=\"gra-btn gra-btn-green gra-btn-outline\">yeşil</button>\n    <button class=\"gra-btn gra-btn-green gra-btn-clear\">yeşil</button>\n    <button class=\"gra-btn gra-btn-green\" disabled>yeşil</button>\n  </div>\n  <div>\n    <button class=\"gra-btn gra-btn-red\">kırmızı</button>\n    <button class=\"gra-btn gra-btn-red gra-btn-outline\">kırmızı</button>\n    <button class=\"gra-btn gra-btn-red gra-btn-clear\">kırmızı</button>\n    <button class=\"gra-btn gra-btn-red\" disabled>kırmızı</button>\n  </div>\n</div>\n\n```html\n<div>\n  <button class=\"gra-btn gra-btn-blue\">mavi</button>\n  <button class=\"gra-btn gra-btn-blue gra-btn-outline\">mavi</button>\n  <button class=\"gra-btn gra-btn-blue gra-btn-clear\">mavi</button>\n  <button class=\"gra-btn gra-btn-blue\" disabled>mavi</button>\n</div>\n<div>\n  <button class=\"gra-btn gra-btn-yellow\">sarı</button>\n  <button class=\"gra-btn gra-btn-yellow gra-btn-outline\">sarı</button>\n  <button class=\"gra-btn gra-btn-yellow gra-btn-clear\">sarı</button>\n  <button class=\"gra-btn gra-btn-yellow\" disabled>sarı</button>\n</div>\n<div>\n  <button class=\"gra-btn gra-btn-green\">yeşil</button>\n  <button class=\"gra-btn gra-btn-green gra-btn-outline\">yeşil</button>\n  <button class=\"gra-btn gra-btn-green gra-btn-clear\">yeşil</button>\n  <button class=\"gra-btn gra-btn-green\" disabled>yeşil</button>\n</div>\n<div>\n  <button class=\"gra-btn gra-btn-red\">kırmızı</button>\n  <button class=\"gra-btn gra-btn-red gra-btn-outline\">kırmızı</button>\n  <button class=\"gra-btn gra-btn-red gra-btn-clear\">kırmızı</button>\n  <button class=\"gra-btn gra-btn-red\" disabled>kırmızı</button>\n</div>\n```\n\n## Diğer Tipler\n\n<div class=\"gra-doc-s-wrapper\">\n\n[Link](# 'Link Butonu')\n<input class=\"gra-btn\" type=\"button\" value=\"Input\" />\n\n</div>\n\n```html\n<a class=\"gra-btn\" href=\"#\" type=\"button\">Link</a>\n<input class=\"gra-btn\" type=\"button\" value=\"Input\" />\n```\n","mdtype":"MDHTML","section":"buttons"}]}}},"site":{"siteMetadata":{"siteUrl":"https://gralig.netlify.app"}}},"pageContext":{"relativePath":"docs/button/en.md","language":"tr","intl":{"language":"tr","languages":["en","tr"],"messages":{"404.pagenotfound":"Sayfa Bulunamadı","404.emptyroute":"Aradığınız sayfa muhtemelen değiştirildi ya da kaldırıldı.","404.gotodocs":"Dökümanlara Dön","404.gotohome":"Ana Sayfaya Dön","title":"Gralig CSS","description":"Sade, grimsi CSS Kütüphanesi","summary":"Gralig sade, gri tonlu bir CSS kütüphanesi. Bu kütüphaneyi başlangıç yardımcınız olarak kullanabilirsiniz.","author":"@erenesto","keywords":"css, css kütüphanesi, frontend, ui, tasarım, gri, basit css","pages.404":"Hata 404","pages.index":"Gralig CSS","pages.docs":"Gralig Dökümantasyonu","sidenavLinks.docs.name":"Giriş","sidenavLinks.colors.name":"Renkler","sidenavLinks.grid.name":"Izgara(Grid)","sidenavLinks.dark.name":"Karanlık Mod","sidenavLinks.vars.name":"Değişkenler","sidenavLinks.responsive.name":"Mobil Uyumluluk","sidenavLinks.utils.name":"Yardımcılar","sidenavLinks.typography.name":"Tipografi","sidenavLinks.button.name":"Buton","sidenavLinks.form.name":"Form","sidenavLinks.custom-inputs.name":"Özel Inputlar","sidenavLinks.checkbox.name":"Onay Butonu","sidenavLinks.radio.name":"Radyo Buton","sidenavLinks.switch.name":"Anahtar","sidenavLinks.nav.name":"Navigasyon","sidenavLinks.navbar.name":"Navigasyon Barı","sidenavLinks.footer.name":"Altbilgi Barı","sidenavLinks.breadcrumb.name":"Gezinti Menüsü","sidenavLinks.card.name":"Kart","sidenavLinks.alert.name":"Uyarı","sidenavLinks.list.name":"Liste","sidenavLinks.table.name":"Tablo","sidenavLinks.dropdown.name":"Açılır Liste","sidenavLinks.progress.name":"İlerleme","sidenavLinks.loading.name":"Bekleme","sidenavLinks.modal.name":"Açılır Pencere","words.copy":"Kopyala","words.copied":"Kopyalandı!","words.docs":"Döküman","words.builtwith":"ile yapıldı."},"routed":true,"originalPath":"/docs/button","redirect":false,"defaultLanguage":"en"}}},
    "staticQueryHashes": ["63159454"]}